/* 기준색 #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%);
  /* 아래는 다크 모드가 갈아 끼우는 값. 라이트에서는 원래 쓰던 색 그대로다 */
  --bg-top: #FDF5EA;
  --tint-rgb: 255, 255, 255;  /* 유리 틴트·반사광 색 */
  --shade-rgb: 120, 72, 32;   /* 그림자 색 */
  --accent-rgb: 200, 116, 58;
  --paper-rgb: 255, 250, 242; /* 거의 불투명한 면(펼친 목록, 검색창) */
  --fill-k: 1;   /* 유리 틴트 농도 배율 */
  --edge-k: 1;   /* 반사광·테두리 선 농도 배율 */
  --lens-edge-k: 1; /* 렌즈 노브(.lg-thumb)의 반사광·테두리 배율 */
  --shade-k: 1;  /* 그림자 농도 배율 */
  --blob-a: #F4B183;
  --blob-b: #E8A0A0;
  --blob-c: #E9C98B;
  --blob-k: 1;
  --tip-bg: rgba(255, 252, 247, 0.88);
  --star: #D69628;

  /* 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(var(--accent-rgb), 0.12);
}

/* 다크 모드: 검정·차콜의 중립 유리. 액센트(주황)만 라이트와 같은 계열로 남긴다.
   <html data-theme>는 <head>의 스크립트가 처음에 정하고 theme.js가 바꾼다.
   어두운 바탕에서는 흰 틴트가 뿌옇게 떠 보이므로 틴트·반사광은 줄이고 그림자는 진하게 한다 */
:root[data-theme="dark"] {
  color-scheme: dark;
  --base: #0E0E10;
  --base-deep: #060607;
  --bg-top: #18181B;
  --ink: #ECECEE;
  --muted: rgba(236, 236, 238, 0.64);
  --accent: #E39257;
  --glass: rgba(28, 28, 31, 0.55);
  --glass-strong: rgba(255, 255, 255, 0.12);
  --border: rgba(255, 255, 255, 0.12);
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --tint-rgb: 255, 255, 255;
  --shade-rgb: 0, 0, 0;
  --accent-rgb: 227, 146, 87;
  --paper-rgb: 24, 24, 27;
  --fill-k: 0.3;
  --edge-k: 0.3;
  --lens-edge-k: 0.55;
  --shade-k: 2;
  --blob-a: #3A3A42;
  --blob-b: #2A2A31;
  --blob-c: #4A4A52;
  --blob-k: 0.5;
  --tip-bg: rgba(24, 24, 27, 0.92);

  /* Dash 4 기본값 중 밝은 바탕 기준인 것들 */
  --Dash-Text-Primary: var(--ink);
  --Dash-Text-Disabled: rgba(236, 236, 238, 0.4);
  --Dash-Fill-Primary-Hover: rgba(255, 255, 255, 0.06);
  --Dash-Fill-Primary-Active: rgba(255, 255, 255, 0.1);
  --Dash-Fill-Disabled: rgba(255, 255, 255, 0.06);
  --Dash-Stroke-Weak: rgba(255, 255, 255, 0.1);
}
/* 테마 전환: theme.js가 View Transition으로 바꾼다. 화면 전체(유리 표면·탭의 ::before·차트·배경 그라데이션)를
   한 장의 사진처럼 같은 시간·같은 곡선으로 넘기므로 영역마다 어두워지는 속도가 어긋나지 않는다 */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; animation-timing-function: ease; }

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh; /* 모바일 주소창이 접히고 펴져도 높이가 맞게. 모르는 브라우저는 윗줄을 쓴다 */
  background: linear-gradient(160deg, var(--bg-top) 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;
  /* 노치·홈 표시줄(viewport-fit=cover)에 가리지 않게. 안전영역이 없는 기기에서는 윗줄과 같다 */
  padding: 24px max(16px, env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

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

.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); }

/* 테마 고르기(theme.js): 해·달 아이콘은 제자리에 있고, 고른 쪽으로 리퀴드 글래스 렌즈(liquid_glass.js의
   Selector, pill·탭과 같은 .lg-thumb)가 미끄러져 아이콘을 굴절시킨다. 렌즈가 붙기 전에는 고른 칸을
   <html data-theme>로 칠해 둔다. 아이콘은 그림 파일 없이: 해 = 채운 원 + 둘레 점 8개(box-shadow), 달 = 깎은 초승달 */
.theme-toggle {
  display: flex;
  flex: none;
  align-self: center;
  gap: 2px;
  margin-left: auto;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(var(--tint-rgb), calc(0.35 * var(--fill-k)));
  box-shadow: inset 0 1px 2px rgba(var(--shade-rgb), calc(0.08 * var(--shade-k))), var(--highlight);
}
.theme-opt {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s;
}
.theme-opt::before { content: ""; position: absolute; inset: -9px -1px; } /* 터치 영역 44px */
.theme-opt:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.55); outline-offset: 2px; }
.theme-toggle:not(.lg-sel) .theme-opt { cursor: pointer; }
@media (hover: hover) { .theme-opt:hover { color: var(--ink); } }
/* 고른 칸(렌즈가 지나가는 동안은 그 밑의 칸) 아이콘은 액센트 */
.theme-toggle.lg-sel .theme-opt.is-hot,
.theme-toggle:not(.lg-sel) .theme-opt[aria-checked="true"],
[data-theme="light"] .theme-toggle:not(.lg-sel) .theme-opt[data-value="light"],
[data-theme="dark"] .theme-toggle:not(.lg-sel) .theme-opt[data-value="dark"] { color: var(--accent); }
[data-theme="light"] .theme-toggle:not(.lg-sel) .theme-opt[data-value="light"],
[data-theme="dark"] .theme-toggle:not(.lg-sel) .theme-opt[data-value="dark"] {
  background: rgba(var(--tint-rgb), calc(0.6 * var(--fill-k)));
  box-shadow: var(--highlight), 0 3px 10px rgba(var(--shade-rgb), calc(0.16 * var(--shade-k)));
}
.theme-sun {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow:
    0 -5.5px 0 -1.6px currentColor, 0 5.5px 0 -1.6px currentColor, 5.5px 0 0 -1.6px currentColor, -5.5px 0 0 -1.6px currentColor,
    3.9px 3.9px 0 -1.6px currentColor, -3.9px -3.9px 0 -1.6px currentColor, 3.9px -3.9px 0 -1.6px currentColor, -3.9px 3.9px 0 -1.6px currentColor;
}
.theme-moon {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: inset -3.5px -2.5px 0 0 currentColor;
  transform: rotate(-20deg);
}

/* 버전: 페이지 맨 아래, 마지막 카드 바깥 오른쪽에 작게 */
.page-foot {
  margin-top: 12px;
  padding: 0 12px;
  text-align: right;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  user-select: none;
  -webkit-user-select: none;
}

.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(var(--tint-rgb), calc((var(--tint) - (var(--tint) - 0.03) * var(--lift)) * var(--fill-k)));
  backdrop-filter: blur(1px) saturate(1.6);
  -webkit-backdrop-filter: blur(1px) saturate(1.6);
  box-shadow:
    inset 0 1.5px 0 rgba(var(--tint-rgb), calc((0.7 + 0.25 * var(--lift)) * var(--edge-k))),
    inset 0 -1px 1px rgba(var(--tint-rgb), calc(0.25 * var(--edge-k))),
    inset 0 0 0 1px rgba(var(--tint-rgb), calc((0.3 + 0.3 * var(--lift)) * var(--edge-k))),
    0 calc(3px + 9px * var(--lift)) calc(10px + 18px * var(--lift)) rgba(var(--shade-rgb), calc((0.16 + 0.1 * var(--lift)) * var(--shade-k)));
}
.lq::after { /* 스펙큘러 하이라이트 */
  content: "";
  position: absolute;
  inset: 2px 12% auto;
  height: 42%;
  border-radius: 999px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(var(--tint-rgb), calc((0.3 + 0.2 * var(--lift)) * var(--edge-k))), rgba(var(--tint-rgb), 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(var(--accent-rgb), 0.45); outline-offset: 3px; }
.lg-sel > :not(.lg-thumb) { position: relative; z-index: 1; }
/* 렌즈 노브: 참고자료 예시(.sel-thumb)처럼 고른 글자 위에 거의 투명하게 떠서, 가장자리에서 밑의 글자를 굴절시킨다
   (굴절은 Chromium의 SVG 렌즈, 그 외 브라우저는 .lq의 블러). 흰 틴트를 옅게 두어 글자가 흐려지지 않는다.
   그림자·테두리는 예시 값으로 진하게 해 유리가 떠 보이게 한다. 다크에서는 --lens-edge-k로 테두리를 덜 줄인다 */
.lg-thumb {
  --tint: 0.16;
  position: absolute;
  z-index: 2;
  border-radius: 999px;
  pointer-events: none;
}
.lg-thumb.lq {
  box-shadow:
    inset 0 1.5px 0 rgba(var(--tint-rgb), calc((0.7 + 0.25 * var(--lift)) * var(--lens-edge-k))),
    inset 0 -1px 1px rgba(var(--tint-rgb), calc(0.25 * var(--lens-edge-k))),
    inset 0 0 0 1px rgba(var(--tint-rgb), calc((0.18 + 0.22 * var(--lift)) * var(--lens-edge-k))),
    0 calc(6px + 10px * var(--lift)) calc(16px + 18px * var(--lift)) rgba(var(--shade-rgb), calc((0.2 + 0.14 * var(--lift)) * var(--shade-k)));
}
.lg-thumb.lq::after {
  background: linear-gradient(to bottom, rgba(var(--tint-rgb), calc((0.3 + 0.2 * var(--lift)) * var(--lens-edge-k))), rgba(var(--tint-rgb), 0));
}
.theme-toggle .lg-thumb { --tint: 0.3; } /* 아이콘 칸은 작아 틴트가 좀 있어야 렌즈 모양이 보인다 */

/* 탭: 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.is-hot { color: var(--ink) !important; }
/* 마우스가 있을 때만. 터치에서는 누른 뒤에도 :hover가 남아 고른 것처럼 보인다 */
@media (hover: hover) { .tabs-wrap .tab:hover { 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(var(--shade-rgb), calc(0.12 * var(--shade-k))), 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(var(--tint-rgb), calc(0.35 * var(--fill-k)));
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 2px rgba(var(--shade-rgb), calc(0.08 * var(--shade-k))), 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: center;
  white-space: nowrap;
  transition: color 0.2s;
}
.pills .is-hot .pill { color: var(--ink); }
@media (hover: hover) { .pill:hover { 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(var(--shade-rgb), calc(0.12 * var(--shade-k))), 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(var(--tint-rgb), calc(0.5 * var(--lift) * var(--fill-k))), transparent 70%),
    rgba(var(--tint-rgb), calc((var(--tint) - (var(--tint) - 0.08) * var(--lift)) * var(--fill-k))) !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(var(--tint-rgb), calc((0.8 + 0.2 * var(--lift)) * var(--edge-k))),
    0 calc(1px + 8px * var(--lift)) calc(4px + 18px * var(--lift)) rgba(var(--shade-rgb), calc((0.06 + 0.14 * var(--lift)) * var(--shade-k)));
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: --tint 0.2s;
}
@media (hover: hover) { .dash-dropdown.glass-dropdown:hover { --tint: 0.7; } }
.dash-dropdown.glass-dropdown:focus { outline: 2px solid rgba(var(--accent-rgb), 0.35) !important; }
.dash-dropdown.glass-dropdown .dash-dropdown-trigger { padding: 0 16px; min-height: 38px; }
/* 여러 명을 고르면 나오는 "3 selected"(Dash 기본은 액센트 틴트 네모). 드롭다운과 같은 흰 유리 알약으로 */
.dash-dropdown.glass-dropdown .dash-dropdown-value-count {
  padding: 1px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(var(--tint-rgb), calc(0.55 * var(--fill-k)));
  box-shadow: var(--highlight), 0 1px 3px rgba(var(--shade-rgb), calc(0.08 * var(--shade-k)));
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* 펼친 목록은 body에 붙으므로 전역으로 지정 */
.dash-dropdown-content {
  /* 검색 기록 목록이 길어져 뒤의 버튼 글자가 비쳐 보이지 않게 조금 더 불투명하게 */
  background: rgba(var(--paper-rgb), 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.selected { background: rgba(var(--accent-rgb), 0.12); }
@media (hover: hover) {
  .dash-dropdown-content .dash-options-list-option:hover { background: rgba(var(--accent-rgb), 0.12); }
}
/* 검색창은 목록 위에 붙어 있으므로(sticky), 밑으로 지나가는 이름이 글자와 겹치지 않게 유리 배경을 깐다 */
.dash-dropdown-search-container {
  border-radius: 999px !important;
  border-color: var(--border) !important;
  background: rgba(var(--paper-rgb), 0.92) !important;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--highlight), 0 4px 12px rgba(var(--shade-rgb), calc(0.08 * var(--shade-k)));
  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 { align-items: flex-start; gap: 12px; } /* 제목이 줄을 바꿔도 토글은 오른쪽 위 */
  .theme-toggle { margin-top: -2px; }
}

/* 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; }
/* 다크 칸 색. 라이트는 app.py CONTRIB_COLORS가 inline으로, 다크 값은 theme.js의 DARK 표와 같게 */
[data-theme="dark"] .contrib-swatch-0 { background: rgba(236, 236, 238, 0.06) !important; }
[data-theme="dark"] .contrib-swatch-1 { background: #3B2516 !important; }
[data-theme="dark"] .contrib-swatch-2 { background: #6E3E1F !important; }
[data-theme="dark"] .contrib-swatch-3 { background: #B5652F !important; }
[data-theme="dark"] .contrib-swatch-4 { background: #EE9A5C !important; }

/* 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(var(--tint-rgb), 0.9);
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 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: var(--tip-bg);
  border: 1px solid rgba(var(--tint-rgb), calc(0.95 * var(--edge-k)));
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 4px 14px rgba(var(--shade-rgb), calc(0.16 * var(--shade-k))), inset 0 1px 0 rgba(var(--tint-rgb), var(--edge-k));
  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;
  top: max(16px, env(safe-area-inset-top)); /* 노치·상태 표시줄 아래로. 숨을 때는 toast.js가 -120px 위로 올린다 */
  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; }
/* 버튼 안에서는 여러 명을 고르면 "A, B, C…"처럼 한 줄로 이어 쓰고 넘치면 말줄임한다.
   .opt가 목록용 flex(폭 100%)라 그대로 두면 이름마다 한 줄씩 쌓여 버튼이 세로로 길어진다 */
.dash-dropdown-value .opt, .dash-dropdown-value .opt-name { display: inline; width: auto; }
.dash-dropdown-grid-container > .dash-dropdown-value { min-width: 0; }

/* 검색 기록·즐겨찾기 모양. 최소한으로: 별은 평소 옅게, 켜면 금색. 고정 항목만 조금 진하게 */
.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;
}
@media (hover: hover) {
  .dash-options-list-option:hover .opt-pin { opacity: 0.85; }
  .opt-pin:hover { color: var(--star); opacity: 1; background: rgba(var(--tint-rgb), calc(0.6 * var(--fill-k))); }
}
.opt-pin:active { transform: scale(0.85); }
.opt-pin--on { color: var(--star); opacity: 1; }
.opt-pin:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 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;
}
@media (hover: hover) {
  .history-clear:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
}
.history-clear:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.55); outline-offset: 1px; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .opt-pin { transition: none; } }
/* 좁은 화면(폰): 손가락으로 누르기 쉽게 터치 영역을 키운다 */
@media (max-width: 640px) {
  .opt-pin { width: 40px; height: 40px; font-size: 16px; opacity: 0.7; }
  .dash-dropdown-content .dash-options-list-option { display: flex; align-items: center; min-height: 44px; }
  /* iOS Safari는 16px보다 작은 입력칸을 누르면 화면을 확대한다 */
  .dash-dropdown-search { font-size: 16px; }

  .controls .pills .pill { display: flex; align-items: center; justify-content: center; min-height: 40px; font-size: 14px; }
  .tabs-wrap .tab { flex: 1 1 0; min-width: 0; padding: 12px 8px !important; font-size: 15px; }

  .history-clear { width: fit-content; min-height: 32px; margin: 0 0 8px auto; padding: 4px 8px; }

  /* Contribution: 칸이 너무 작아지지 않게 폭을 지키고 가로로 넘긴다. 처음에는 최근 쪽(오른쪽 끝)을 보여 준다(contrib_drop.js) */
  .contrib-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .contrib-scroll::-webkit-scrollbar { display: none; }
  .contrib-scroll > * { min-width: 680px; }

  /* 말풍선은 화면 폭을 넘지 않게 줄을 바꾼다. 위치는 glass_tip.js의 placeTip이 화면 안으로 당긴다 */
  .glass-tip, .contrib-tip { max-width: calc(100vw - 32px); white-space: normal; }
}
/* 아주 좁은 폰(320px 등): Game/Day/Week/Month 네 칸이 카드 밖으로 넘치지 않게, 묶음을 카드 폭에 맞추고
   칸은 같은 폭으로 줄인다(minmax(0, 1fr)이 없으면 가장 긴 글자 폭 아래로 줄지 않는다) */
@media (max-width: 360px) {
  .controls .pills { width: 100%; grid-auto-columns: minmax(0, 1fr); }
  .controls .pills .pill { padding: 6px 4px; font-size: 13px; }
}