/* 기준색 #FAEBD7(Antique White) 위에 쌓은 따뜻한 크림/살구 계열 */
:root {
  --base: #FAEBD7;
  --base-deep: #F3D9B8;
  --ink: #3B2A1E;
  --muted: rgba(59, 42, 30, 0.6);
  --accent: #C8743A;
  --glass: rgba(255, 250, 242, 0.45);
  --glass-strong: rgba(255, 255, 255, 0.75);
  --border: rgba(255, 255, 255, 0.75);
  --shadow: 0 8px 32px rgba(120, 72, 32, 0.14);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --blur: blur(18px) saturate(140%);

  /* Dash 4 기본 컴포넌트 색을 같은 계열로 덮어쓴다 */
  --Dash-Fill-Inverse-Strong: transparent;
  --Dash-Text-Strong: var(--ink);
  --Dash-Text-Weak: var(--muted);
  --Dash-Stroke-Strong: var(--border);
  --Dash-Fill-Interactive-Strong: var(--accent);
  --Dash-Fill-Interactive-Weak: rgba(200, 116, 58, 0.12);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(160deg, #FDF5EA 0%, var(--base) 45%, var(--base-deep) 100%);
  color: var(--ink);
  font-family: Pretendard, Inter, system-ui, sans-serif;
}

.page {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

/* 유리 뒤에서 비쳐 보일 색 덩어리 */
.blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.6;
  z-index: -1;
  pointer-events: none;
}
.blob-a { width: 440px; height: 440px; background: #F4B183; top: -100px; left: -80px; }
.blob-b { width: 400px; height: 400px; background: #E8A0A0; bottom: -120px; right: -60px; opacity: 0.45; }
.blob-c { width: 320px; height: 320px; background: #E9C98B; top: 40%; left: 55%; opacity: 0.5; }

.glass {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 24px;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow), var(--highlight);
}

.header {
  user-select: none;
  -webkit-user-select: none;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 18px 28px;
  margin-bottom: 20px;
}
.header h1 { margin: 0; font-size: 26px; letter-spacing: -0.02em; color: var(--ink); }
.version { margin-left: auto; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }

.card { padding: 20px; margin-top: 16px; }
.card h3 { user-select: none; -webkit-user-select: none; margin: 0 0 8px; font-size: 15px; color: var(--muted); font-weight: 600; }

/* ===== Liquid Glass (참고자료/liquid-glass-kit.html, 동작은 liquid_glass.js) ===== */
@property --tint { syntax: "<number>"; inherits: true; initial-value: 0.22; }

/* --lift: 0(쉼) → 1(잡힘), JS가 매 프레임 넣는다. --tint: 쉴 때 흰 틴트 농도. 잡으면 거의 투명한 렌즈가 된다 */
.lq {
  --lift: 0;
  background: rgba(255, 255, 255, calc(var(--tint) - (var(--tint) - 0.03) * var(--lift)));
  backdrop-filter: blur(1px) saturate(1.6);
  -webkit-backdrop-filter: blur(1px) saturate(1.6);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, calc(0.7 + 0.25 * var(--lift))),
    inset 0 -1px 1px rgba(255, 255, 255, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, calc(0.3 + 0.3 * var(--lift))),
    0 calc(3px + 9px * var(--lift)) calc(10px + 18px * var(--lift)) rgba(120, 72, 32, calc(0.16 + 0.1 * var(--lift)));
}
.lq::after { /* 스펙큘러 하이라이트 */
  content: "";
  position: absolute;
  inset: 2px 12% auto;
  height: 42%;
  border-radius: 999px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, calc(0.3 + 0.2 * var(--lift))), rgba(255, 255, 255, 0));
}

/* 고르는 버튼 묶음(pill, 탭): 위에 렌즈 노브가 떠서 누른 채로 끌 수 있다 */
.lg-sel {
  position: relative;
  isolation: isolate;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: grab;
}
.lg-sel.is-held { cursor: grabbing; }
.lg-sel:focus-visible { outline: 2px solid rgba(200, 116, 58, 0.45); outline-offset: 3px; }
.lg-sel > :not(.lg-thumb) { position: relative; z-index: 1; }
/* 흰 노브가 진한 글자를 덮어 흐려지지 않게, 쉴 때는 선택된 글자를 노브 위로. 잡으면 렌즈 밑으로 들어가 굴절된다 */
.lg-sel:not(.is-held) > .is-hot { z-index: 3; }
.lg-thumb {
  --tint: 0.42;
  position: absolute;
  z-index: 2;
  border-radius: 999px;
  pointer-events: none;
}

/* 탭: pill과 같은 완전히 둥근 모양. 바탕 유리는 ::before에 두어 렌즈가 페이지 배경까지 비추게 한다 */
.tabs-wrap .tabs {
  position: relative;
  flex-direction: row;
  gap: 6px;
  padding: 6px;
  border: none !important;
  border-radius: 999px;
}
.tabs-wrap .tabs::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 1px solid var(--border);
  border-radius: inherit;
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow), var(--highlight);
}
.tabs-wrap .tab {
  background: transparent !important;
  border: none !important;
  border-radius: 999px !important;
  color: var(--muted) !important;
  padding: 10px 18px !important;
  font-weight: 600;
  transition: color 0.2s;
}
.tabs-wrap .tab:hover, .tabs-wrap .tab.is-hot { color: var(--ink) !important; }
/* JS가 붙기 전에도 선택된 탭이 보이게 */
.tabs-wrap .tabs:not(.lg-sel) .tab--on {
  background: var(--glass-strong) !important;
  color: var(--ink) !important;
  box-shadow: 0 2px 10px rgba(120, 72, 32, 0.12), var(--highlight);
}

/* 컨트롤 */
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

/* 항목 폭을 같게 두어 노브가 한 칸씩 움직인다 */
.controls .pills {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 2px rgba(120, 72, 32, 0.08), var(--highlight);
}
.pills .dash-options-list-option { padding: 0; background: transparent; border-radius: 999px; }
.pill-input, .pills .dash-options-list-option-wrapper { display: none; }
.pill {
  display: block;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: inherit;
  color: var(--muted);
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
  transition: color 0.2s;
}
.pill:hover, .pills .is-hot .pill { color: var(--ink); }
.pills:not(.lg-sel) .dash-options-list-option.selected .pill,
.pills:not(.lg-sel) .pill:has(.pill-input:checked) {
  background: var(--glass-strong);
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(120, 72, 32, 0.12), var(--highlight);
}

/* 드롭다운 (Dash 4: className이 button.dash-dropdown 자체에 붙는다). 누르면 렌즈, 빛이 손가락을 따라간다 */
.dash-dropdown.glass-dropdown { min-width: 220px; }
.dash-dropdown.glass-dropdown.wide { min-width: 360px; flex: 1; }
.dash-dropdown-wrapper:has(.wide) { flex: 1; }
.dash-dropdown.glass-dropdown {
  --lift: 0;
  --tint: 0.35;
  position: relative;
  background:
    radial-gradient(80px 80px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, calc(0.5 * var(--lift))), transparent 70%),
    rgba(255, 255, 255, calc(var(--tint) - (var(--tint) - 0.08) * var(--lift))) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  color: var(--ink) !important;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, calc(0.8 + 0.2 * var(--lift))),
    0 calc(1px + 8px * var(--lift)) calc(4px + 18px * var(--lift)) rgba(120, 72, 32, calc(0.06 + 0.14 * var(--lift)));
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: --tint 0.2s;
}
.dash-dropdown.glass-dropdown:hover { --tint: 0.7; }
.dash-dropdown.glass-dropdown:focus { outline: 2px solid rgba(200, 116, 58, 0.35) !important; }
.dash-dropdown.glass-dropdown .dash-dropdown-trigger { padding: 0 16px; min-height: 38px; }

/* 펼친 목록은 body에 붙으므로 전역으로 지정 */
.dash-dropdown-content {
  /* 검색 기록 목록이 길어져 뒤의 버튼 글자가 비쳐 보이지 않게 조금 더 불투명하게 */
  background: rgba(255, 250, 242, 0.94) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow), var(--highlight);
  color: var(--ink);
  padding: 4px;
}
.dash-dropdown-content .dash-options-list-option {
  background: transparent;
  border-radius: 12px;
  padding: 6px 10px;
}
.dash-dropdown-content .dash-options-list-option:hover,
.dash-dropdown-content .dash-options-list-option.selected { background: rgba(200, 116, 58, 0.12); }
/* 검색창은 목록 위에 붙어 있으므로(sticky), 밑으로 지나가는 이름이 글자와 겹치지 않게 유리 배경을 깐다 */
.dash-dropdown-search-container {
  border-radius: 999px !important;
  border-color: var(--border) !important;
  background: rgba(255, 250, 242, 0.92) !important;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--highlight), 0 4px 12px rgba(120, 72, 32, 0.08);
  z-index: 1;
}

/* 펼친 목록의 스크롤바는 숨긴다. 휠·터치·키보드 스크롤은 그대로 된다 */
.dash-dropdown-content,
.dash-dropdown-content * { scrollbar-width: none; }
.dash-dropdown-content::-webkit-scrollbar,
.dash-dropdown-content *::-webkit-scrollbar { display: none; }

@media (max-width: 640px) {
  .dash-dropdown.glass-dropdown, .dash-dropdown.glass-dropdown.wide { min-width: 100%; }
  .dash-dropdown-wrapper { width: 100%; }
  .header { flex-direction: column; gap: 4px; }
  .version { margin-left: 0; }
}

/* TradingView식 조작 차트 */
.tv-chart .js-plotly-plot:focus { outline: none; }
.tv-chart .draglayer rect { cursor: inherit !important; }

/* Contribution 범례 */
.contrib-legend {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}
.contrib-legend span:first-child { margin-right: 4px; }
.contrib-legend span:last-child { margin-left: 4px; }
.contrib-swatch { width: 11px; height: 11px; border-radius: 3px; }

/* Dash 탭 컨테이너가 영역 밖을 잘라 카드/탭 그림자가 끊기지 않게 한다 */
.tabs-wrap, .tabs-wrap .tab-container, .tabs-wrap .tab-content, #_dash-app-content { overflow: visible !important; }

/* Contribution 물방울 (contrib_drop.js): 렌즈 + 반사광 + 아래 그림자 */
.contrib-drop {
  position: absolute;
  left: 0; top: 0;
  border-radius: 3px;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
  --lift: 1;
  --tint: 0.06;
  will-change: transform;
}
.contrib-drop::after { /* 왼쪽 위 반사광 */
  inset: 1px 2px auto !important;
  height: 40% !important;
  border-radius: 2px !important;
}
.contrib-ripple {
  position: absolute;
  border-radius: 3px;
  pointer-events: none;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 6px rgba(200, 116, 58, 0.25);
  z-index: 2;
  animation: contrib-ripple 0.6s ease-out forwards;
}
@keyframes contrib-ripple {
  from { transform: scale(0.4); opacity: 0.9; }
  to { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .contrib-ripple { display: none; } }


/* 모든 차트 말풍선 (glass_tip.js): Plotly 기본 툴팁은 숨기고 같은 글을 진한 유리 위에 */
.has-glass-tip .hoverlayer .hovertext { opacity: 0; }
.glass-tip, .contrib-tip {
  position: absolute;
  transform: translate(-4px, -50%);
  padding: 6px 12px;
  border-radius: 12px;
  background: rgba(255, 252, 247, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 4px 14px rgba(120, 72, 32, 0.16), inset 0 1px 0 rgba(255, 255, 255, 1);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  z-index: 4;
  transition: opacity 0.15s, transform 0.2s cubic-bezier(0.34, 1.6, 0.5, 1), left 0.12s, top 0.12s;
}
.glass-tip.on, .contrib-tip.on { opacity: 1; transform: translate(0, -50%); }
.glass-tip-name { font-weight: 600; color: var(--muted); font-size: 11px; }

/* 추적 요청 결과 토스트 (assets/toast.js, 참고자료/liquid-glass-kit.html의 .toast) */
.toast {
  position: fixed;
  top: 16px;
  left: 50%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  width: max-content; /* left:50%라 그냥 두면 화면 절반 폭에서 줄이 바뀐다 */
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 22px;
  border-radius: 24px;
  --tint: 0.55;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
  transform: translate(-50%, -120px);
  pointer-events: none;
  user-select: none;
}

/* 검색 기록·즐겨찾기(assets/chips.js) 동작에 필요한 최소 규칙. 모양은 디자인에서 덧입힌다 */
.dash-options-list-option .dash-options-list-option-text { flex: 1; min-width: 0; }
.opt { display: flex; align-items: center; gap: 8px; width: 100%; }
.opt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.opt-pin { margin-left: auto; cursor: pointer; }
/* 고른 값 표시(드롭다운 버튼 안)에는 별을 보이지 않는다. 버튼 안에서 눌리지도 않게 한다 */
.dash-dropdown-value .opt-pin { display: none; }

/* 검색 기록·즐겨찾기 모양. 최소한으로: 별은 평소 옅게, 켜면 금색. 고정 항목만 조금 진하게 */
.opt-pin {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--muted);
  opacity: 0.55;
  font-size: 14px;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s, opacity 0.15s, background 0.15s, transform 0.15s;
}
.dash-options-list-option:hover .opt-pin { opacity: 0.85; }
.opt-pin:hover { color: #D69628; opacity: 1; background: rgba(255, 255, 255, 0.6); }
.opt-pin:active { transform: scale(0.85); }
.opt-pin--on { color: #D69628; opacity: 1; }
.opt-pin:focus-visible { outline: 2px solid rgba(200, 116, 58, 0.55); outline-offset: 1px; opacity: 1; }
.opt--pinned .opt-name { font-weight: 600; }
.opt:not(.opt--pinned):not(.opt--recent) .opt-name { color: var(--muted); } /* 기록에 없는 검색 결과 */

.history-clear {
  display: block;
  margin: -6px 0 10px 4px;
  padding: 2px 4px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  opacity: 0.75;
}
.history-clear:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.history-clear:focus-visible { outline: 2px solid rgba(200, 116, 58, 0.55); outline-offset: 1px; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .opt-pin { transition: none; } }
@media (max-width: 640px) {
  .opt-pin { width: 32px; height: 32px; font-size: 16px; opacity: 0.7; } /* 손가락으로 누르기 쉽게 */
}