/* ==========================================================================
   흐르는 화살표 버튼 (Flow Button)
   components/ui/flow-button.tsx 를 React·Tailwind 없이 옮긴 버전입니다. (움직임은 CSS 만으로 동작)

   지금은 맨 위 메뉴줄(지점장 소개 ~ 24개사 비교기)에 씁니다. (portal.html .nav-links.flow-nav)
   - 버튼: <a class="nav-link flow-btn"> 안에 왼쪽 화살표 · 글자 · 동그라미 · 오른쪽 화살표를 넣습니다.
     새 메뉴를 만들 때는 기존 메뉴 한 줄을 복사해서 글자와 주소만 바꾸세요.
   - 마우스를 올리면: 가운데 검은 동그라미가 버튼 전체로 퍼지고, 글자는 흰색으로 오른쪽으로 흐르며,
     오른쪽 화살표는 빠져나가고 왼쪽 화살표가 들어옵니다. 누르면 살짝 작아집니다.
   - '무료 증권 점검'(highlight-nav)은 원래처럼 파란색으로 강조합니다.

   버튼 9개가 원래 한 줄(로고 · 상담 버튼 옆)에 다 들어가지 않아서,
   태블릿 화면처럼 메뉴줄을 로고 아래 둘째 줄로 내렸습니다. 넓은 화면에서는 가운데 정렬,
   좁은 화면에서는 옆으로 밀어서 봅니다. (--ap-nav-h 를 함께 바꿔서 메뉴를 눌러 이동해도 제목이 가려지지 않습니다)
   ========================================================================== */

:root {
  --ap-chapter-row: 52px;
  --ap-nav-h: calc(var(--ap-chrome-row) + var(--ap-chapter-row));
}

@media (max-width: 734px) {
  :root { --ap-chapter-row: 48px; }
}

/* ---- 메뉴줄을 둘째 줄로 ---- */
:root .header-content {
  flex-wrap: wrap;
  height: auto;
  column-gap: 12px;
  row-gap: 0;
}
:root .logo-group {
  order: 1;
  height: var(--ap-chrome-row);
  margin-right: auto;
}
:root .header-actions { order: 2; }

:root .nav-links.flow-nav {
  order: 3;
  flex: 0 0 calc(100% + var(--ap-gutter) * 2);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  justify-content: safe center;
  gap: 8px;
  height: var(--ap-chapter-row);
  margin: 0 calc(var(--ap-gutter) * -1);
  padding: 0 var(--ap-gutter);
  border-top: 1px solid var(--ap-hairline-soft);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
:root .nav-links.flow-nav::-webkit-scrollbar { display: none; }

/* ---- 버튼 ---- */
:root .nav-links .nav-link.flow-btn {
  --flow-ink: #111111;                    /* 글자·화살표 */
  --flow-line: rgba(51, 51, 51, 0.4);     /* 테두리 */
  --flow-fill: #111111;                   /* 퍼지는 동그라미 */
  --flow-on-fill: #FFFFFF;                /* 동그라미 위 글자 */

  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 34px;
  padding: 0 24px;
  overflow: hidden;
  border: 1.5px solid var(--flow-line);
  border-radius: 100px;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--flow-ink);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transform: none;
  transition:
    border-color 600ms cubic-bezier(0.23, 1, 0.32, 1),
    border-radius 600ms cubic-bezier(0.23, 1, 0.32, 1),
    color 600ms cubic-bezier(0.23, 1, 0.32, 1),
    scale 600ms cubic-bezier(0.23, 1, 0.32, 1);
}

:root .nav-links .nav-link.flow-btn.highlight-nav {
  --flow-ink: var(--ap-link, #0066CC);
  --flow-line: rgba(0, 102, 204, 0.45);
  --flow-fill: #0071E3;
  --flow-on-fill: #FFFFFF;
}

:root[data-theme="dark"] .nav-links .nav-link.flow-btn {
  --flow-ink: #F5F5F7;
  --flow-line: rgba(245, 245, 247, 0.35);
  --flow-fill: #F5F5F7;
  --flow-on-fill: #111111;
}
:root[data-theme="dark"] .nav-links .nav-link.flow-btn.highlight-nav {
  --flow-ink: var(--ap-link, #2997FF);
  --flow-line: rgba(41, 151, 255, 0.5);
  --flow-fill: #0071E3;
  --flow-on-fill: #FFFFFF;
}

/* 화살표 (lucide ArrowRight) */
:root .flow-btn .flow-btn-arr {
  position: absolute;
  top: 50%;
  z-index: 9;
  width: 13px;
  height: 13px;
  margin-top: -6.5px;
  fill: none;
  stroke: var(--flow-ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    left 800ms cubic-bezier(0.34, 1.56, 0.64, 1),
    right 800ms cubic-bezier(0.34, 1.56, 0.64, 1),
    stroke 800ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
:root .flow-btn .flow-btn-arr--in { left: -25%; }   /* 왼쪽 밖에서 대기 */
:root .flow-btn .flow-btn-arr--out { right: 9px; }  /* 처음엔 오른쪽에 보임 */

/* 글자 */
:root .flow-btn .flow-btn-text {
  position: relative;
  z-index: 1;
  transform: translateX(-7px);
  transition: transform 800ms ease-out;
}

/* 가운데에서 퍼지는 동그라미 */
:root .flow-btn .flow-btn-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--flow-fill);
  opacity: 0;
  transform: translate(-50%, -50%);
  transition:
    width 800ms cubic-bezier(0.19, 1, 0.22, 1),
    height 800ms cubic-bezier(0.19, 1, 0.22, 1),
    opacity 800ms cubic-bezier(0.19, 1, 0.22, 1);
}

/* ---- 마우스를 올렸을 때 · 키보드로 골랐을 때 ---- */
@media (hover: hover) {
  :root .nav-links .nav-link.flow-btn:hover {
    border-color: transparent;
    border-radius: 12px;
    color: var(--flow-on-fill);
    background: transparent;
    text-decoration: none;
  }
  :root .flow-btn:hover .flow-btn-arr { stroke: var(--flow-on-fill); }
  :root .flow-btn:hover .flow-btn-arr--in { left: 9px; }
  :root .flow-btn:hover .flow-btn-arr--out { right: -25%; }
  :root .flow-btn:hover .flow-btn-text { transform: translateX(7px); }
  :root .flow-btn:hover .flow-btn-circle { width: 220px; height: 220px; opacity: 1; }
}

:root .nav-links .nav-link.flow-btn:focus-visible {
  outline: 2px solid var(--ap-accent, #0071E3);
  outline-offset: 2px;
  border-color: transparent;
  border-radius: 12px;
  color: var(--flow-on-fill);
}
:root .flow-btn:focus-visible .flow-btn-arr { stroke: var(--flow-on-fill); }
:root .flow-btn:focus-visible .flow-btn-arr--in { left: 9px; }
:root .flow-btn:focus-visible .flow-btn-arr--out { right: -25%; }
:root .flow-btn:focus-visible .flow-btn-text { transform: translateX(7px); }
:root .flow-btn:focus-visible .flow-btn-circle { width: 220px; height: 220px; opacity: 1; }

:root .nav-links .nav-link.flow-btn:active { scale: 0.95; }

/* ---- 휴대폰 ---- */
@media (max-width: 734px) {
  :root .header-content { column-gap: 8px; }
  :root .nav-links.flow-nav { gap: 6px; }
  :root .nav-links .nav-link.flow-btn {
    height: 32px;
    padding: 0 22px;
    font-size: 13px;
  }
}

/* ---- 움직임 줄이기 설정: 퍼지기 · 흐르기 없이 색만 바뀝니다 ---- */
@media (prefers-reduced-motion: reduce) {
  :root .nav-links .nav-link.flow-btn,
  :root .flow-btn .flow-btn-arr,
  :root .flow-btn .flow-btn-text,
  :root .flow-btn .flow-btn-circle { transition-duration: 1ms; }
}