@font-face {
  font-family: "ThreeUI Fragment Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./threeui-fonts/fragment-mono.woff2") format("woff2");
}

.animated-top-dock-component {
  container-type: inline-size;
  color: #ecece8;
  background: #0b0b0b;
  font-family: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.animated-top-dock-component::after {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  content: "";
  opacity: 0.12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.animated-top-dock-component {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.035), transparent 34%),
    #080808;
}

.animated-top-dock__nav {
  position: absolute;
  top: clamp(24px, 5cqw, 46px);
  left: 50%;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  gap: 3px;
  height: 38px;
  padding: 4px;
  overflow: visible;
  border: 1px solid #292929;
  border-radius: 11px;
  background: rgba(14, 14, 14, 0.86);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.48), inset 0 1px rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(18px) saturate(75%);
  transform: translateX(-50%);
  isolation: isolate;
}

.animated-top-dock__item {
  position: relative;
  z-index: 6;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  height: 28px;
  min-width: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  outline: none;
  color: #858580;
  background: rgba(21, 21, 20, 0.9);
  font: 400 10px/1 "ThreeUI Fragment Mono", ui-monospace, monospace;
  letter-spacing: 0.1em;
  white-space: nowrap;
  backdrop-filter: blur(14px) saturate(70%);
  transform-origin: 50% 0;
  transition: color 0.15s, border-color 0.18s, background 0.18s, box-shadow 0.18s;
  will-change: width, height, transform;
  cursor: pointer;
}

.animated-top-dock__item[data-dock-near="true"],
.animated-top-dock__item:focus-visible {
  z-index: 7;
  color: #ecece8;
  border-color: #41413e;
  background: rgba(27, 27, 26, 0.94);
  box-shadow: 0 7px 16px rgba(0, 0, 0, 0.26);
}

/* 2026-10-15 맨 앞 「홈」 칸 — 다른 칸과 같은 링크 모양에 로고 그림(.animated-top-dock__mark)을 아이콘 자리에 넣는다. */
.animated-top-dock__mark svg {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 3px;
}

.animated-top-dock__link {
  gap: 6px;
  width: 94px;
  padding: 0 9px;
}

.animated-top-dock__link[aria-pressed="true"] {
  color: #111;
  border-color: #e8e8e3;
  background: #e8e8e3;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.28);
}

.animated-top-dock__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  opacity: 0.62;
  transition: opacity 0.16s;
}

.animated-top-dock__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.animated-top-dock__item[data-dock-near="true"] .animated-top-dock__icon,
.animated-top-dock__item:focus-visible .animated-top-dock__icon {
  opacity: 1;
}

/* Existing-site shell: only the authored dock capsule is mounted over TanQuant. */
.tq-sable-dock {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100100;
  width: 100%;
  height: 104px;
  pointer-events: none;
  background: transparent;
}
.tq-sable-dock::after { display: none; }
.tq-sable-dock .animated-top-dock__nav {
  top: 24px;
  height: 52px;
  padding: 6px;
  gap: 4px;
  border-radius: 15px;
  pointer-events: auto;
}
.tq-sable-dock .animated-top-dock__item {
  height: 40px;
  border-radius: 10px;
  font-size: 12px;
}
.tq-sable-dock .animated-top-dock__link {
  width: 126px;
  padding: 0 13px;
  gap: 8px;
}
.tq-sable-dock .animated-top-dock__icon {
  width: 16px;
  height: 16px;
}

/* Home follows the same dark-to-light value already driving the WebGL scene. */
body.motion-canvas-mode .tq-sable-dock .animated-top-dock__nav {
  border-color: var(--motion-dock-nav-border, #292929);
  background: var(--motion-dock-nav-bg, rgba(14, 14, 14, .86));
  box-shadow:
    0 13px 32px var(--motion-dock-shadow, rgba(0, 0, 0, .48)),
    inset 0 1px var(--motion-dock-inset, rgba(255, 255, 255, .035));
}
body.motion-canvas-mode .tq-sable-dock .animated-top-dock__item {
  color: var(--motion-dock-item-color, #858580);
  background: var(--motion-dock-item-bg, rgba(21, 21, 20, .9));
}
body.motion-canvas-mode .tq-sable-dock .animated-top-dock__item[data-dock-near="true"],
body.motion-canvas-mode .tq-sable-dock .animated-top-dock__item:focus-visible {
  color: var(--motion-dock-near-color, #ecece8);
  border-color: var(--motion-dock-near-border, #41413e);
  background: var(--motion-dock-near-bg, rgba(27, 27, 26, .94));
}

/* Light product pages keep the authored geometry and motion with a matching palette. */
body.tq-simulator .tq-sable-dock .animated-top-dock__nav,
body.tq-manual .tq-sable-dock .animated-top-dock__nav,
body.tq-community .tq-sable-dock .animated-top-dock__nav {
  border-color: rgba(139, 149, 162, .28);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 13px 32px rgba(51, 65, 85, .16), inset 0 1px rgba(255, 255, 255, .92);
  backdrop-filter: blur(20px) saturate(120%);
}
@media (min-width: 761px) {
  body.tq-simulator .tq-sable-dock .animated-top-dock__nav,
  body.tq-manual .tq-sable-dock .animated-top-dock__nav,
  body.tq-community .tq-sable-dock .animated-top-dock__nav { top: 14px; }
}
body.tq-simulator .tq-sable-dock .animated-top-dock__item,
body.tq-manual .tq-sable-dock .animated-top-dock__item,
body.tq-community .tq-sable-dock .animated-top-dock__item {
  color: #5f6977;   /* 2026-10-21 #687586 은 밝은 캡슐 위 4.4:1 — 4.9:1 로 */
  background: rgba(244, 246, 249, .92);
}
body.tq-simulator .tq-sable-dock .animated-top-dock__item[data-dock-near="true"],
body.tq-manual .tq-sable-dock .animated-top-dock__item[data-dock-near="true"],
body.tq-community .tq-sable-dock .animated-top-dock__item[data-dock-near="true"],
body.tq-simulator .tq-sable-dock .animated-top-dock__item:focus-visible,
body.tq-manual .tq-sable-dock .animated-top-dock__item:focus-visible,
body.tq-community .tq-sable-dock .animated-top-dock__item:focus-visible {
  color: #172033;
  border-color: rgba(139, 149, 162, .35);
  background: #fff;
  box-shadow: 0 8px 18px rgba(51, 65, 85, .12);
}
body.tq-simulator .tq-sable-dock .animated-top-dock__link[aria-pressed="true"],
body.tq-manual .tq-sable-dock .animated-top-dock__link[aria-pressed="true"],
body.tq-community .tq-sable-dock .animated-top-dock__link[aria-pressed="true"] {
  color: #fff;
  border-color: #176ff2;
  background: #176ff2;
  box-shadow: 0 9px 21px rgba(23, 111, 242, .24);
}

body.tq-has-sable-dock .motion-brand-home,
body.tq-has-sable-dock .motion-desktop-nav,
body.tq-has-sable-dock .my-brand,
body.tq-has-sable-dock .my-desktop-nav,
body.tq-has-sable-dock .xa-brand,
body.tq-has-sable-dock .xa-bdg,
body.tq-has-sable-dock .xa-site-nav,
body.tq-has-sable-dock .bar .brand,
body.tq-has-sable-dock .bar .nav { display: none !important; }
body.tq-simulator.tq-has-sable-dock > .xa-bar .xa-go,
body.tq-manual.tq-has-sable-dock > .xa-bar .xa-go { display: none !important; }

@media (max-width: 760px) {
  .tq-sable-dock {
    display: grid;
    height: 68px;
    padding: 0;
    transition: transform .24s ease;
  }
  /* 아래로 내릴 때 숨김 · 올리면 다시(threeui-animated-top-dock.js autoHide · 2026-10-06 모바일 점검) */
  .tq-sable-dock.tq-dock-away { transform: translateY(-110%); }
  .tq-sable-dock .animated-top-dock__nav {
    top: 9px;
    width: calc(100% - 20px);
    height: 50px;
    padding: 5px;
    gap: 3px;
    border-radius: 14px;
    box-sizing: border-box;
  }
  .tq-sable-dock .animated-top-dock__item {
    flex: 1 1 0;
    width: auto !important;
    height: 38px !important;
    min-width: 0;
    border-radius: 9px;
    transform: none !important;
  }
  .tq-sable-dock .animated-top-dock__link {
    width: auto !important;
    padding: 0 6px;
    gap: 0;
  }
  .tq-sable-dock .animated-top-dock__link > span:last-child { display: none; }
  .tq-sable-dock .animated-top-dock__icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    opacity: .78;
  }
  body.tq-has-sable-dock .motion-brand,
  body.tq-has-sable-dock .my-header,
  body.tq-has-sable-dock > .xa-bar,
  body.tq-has-sable-dock > .bar { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .animated-top-dock__item { transform: none !important; }
  .tq-sable-dock { transition: none !important; }
}

/* 메뉴 7칸(2026-10-04 「AI 전략」 추가) — 칸 폭을 126px 고정에서 「글자 + 여백」으로 바꿔 메뉴 전체 폭을 6칸 때(약 830px) 이하로 유지한다.
   넓어지면 각 화면 머리말(로고 · 엔진 이름)과 겹친다. 940px 아래 데스크톱은 아이콘을 빼고 글자만. 휴대폰(760px 이하)은 위 규칙 그대로. */
@media (min-width: 761px) {
  .tq-sable-dock .animated-top-dock__link { width: auto; padding: 0 9px; gap: 6px; font-size: 11px; }
  .tq-sable-dock .animated-top-dock__icon { width: 14px; height: 14px; }
}
@media (min-width: 761px) and (max-width: 940px) {
  .tq-sable-dock .animated-top-dock__link { gap: 0; padding: 0 10px; }
  .tq-sable-dock .animated-top-dock__link .animated-top-dock__icon { display: none; }
}

/* 2026-10-09 메뉴 통일 — 홈 · 파트너스(어두운 화면 · html[data-tq-nav-lite])도 같은 둥근 독을 쓴다.
   자기 머리 줄(.global-nav)은 숨기고 그 자리를 비워 두며, 캡슐은 어두운 바탕에 맞춘 색 · 켜진 칸은 밝은 화면과 같은 파란색. */
html[data-tq-nav-lite] .global-nav { display: none !important; }
html[data-tq-nav-lite] body::before { content: ""; display: block; height: 76px; }
html[data-tq-nav-lite] .tq-sable-dock .animated-top-dock__nav {
  border-color: rgba(255, 255, 255, .1);
  background: rgba(10, 13, 22, .84);
  box-shadow: 0 13px 32px rgba(0, 0, 0, .5), inset 0 1px rgba(255, 255, 255, .05);
}
html[data-tq-nav-lite] .tq-sable-dock .animated-top-dock__item { color: #9aa3b2; background: rgba(255, 255, 255, .045); }
html[data-tq-nav-lite] .tq-sable-dock .animated-top-dock__item[data-dock-near="true"],
html[data-tq-nav-lite] .tq-sable-dock .animated-top-dock__item:focus-visible {
  color: #f3f4f6;
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .1);
}
html[data-tq-nav-lite] .tq-sable-dock .animated-top-dock__link[aria-pressed="true"] {
  color: #fff;
  border-color: #176ff2;
  background: #176ff2;
  box-shadow: 0 9px 21px rgba(23, 111, 242, .32);
}
html[data-tq-nav-lite] body #tq-lang { top: 88px !important; }
@media (min-width: 761px) {
  html[data-tq-nav-lite] .tq-sable-dock .animated-top-dock__nav { top: 14px; }
}
@media (max-width: 760px) {
  html[data-tq-nav-lite] body::before { height: 68px; }
  html[data-tq-nav-lite] body #tq-lang { top: 78px !important; }
}

/* 한국어 이름(백테스트 · 전략 …)은 코딩 글꼴(자간 넓음) 대신 한글 글꼴 — 글자 사이가 벌어져 보이던 것(2026-10-09) */
.tq-sable-dock .animated-top-dock__link.is-hangul {
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
}
@media (min-width: 1100px) {
  html[data-tq-nav-lite] body #tq-lang { top: 18px !important; }   /* 넓은 PC = 독과 같은 줄 오른쪽(커뮤니티 화면처럼) */
}

/* 2026-10-09 메뉴 통일 점검 — 독(가운데)이 커뮤니티 머리 줄 오른쪽 「Google 로그인」 단추를 덮었다(1024~1300px).
   1100px 아래 PC 는 독 아이콘을 빼고(글자만), 1440px 아래에서는 그 단추를 G 아이콘만 남겨 자리를 비운다. */
@media (min-width: 941px) and (max-width: 1099px) {
  .tq-sable-dock .animated-top-dock__link { gap: 0; padding: 0 10px; }
  .tq-sable-dock .animated-top-dock__link .animated-top-dock__icon { display: none; }
}
@media (min-width: 761px) and (max-width: 1439px) {
  body.tq-has-sable-dock .bar .gbtn { gap: 0; padding: 9px 11px; }
  body.tq-has-sable-dock .bar .gbtn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}