/* 처음 셋팅 — 맨 위 띠 (세 화면 공통)
 *
 * J.J 2026-08-13: 「자동적용에 경우 8가지기 때문에 오른쪽 상단 보면 이렇게 되어 있어서
 *   안정감이 있거든. 우리도 처음셋팅이 3개인가 그렇잖아. 따라서 이렇게 되게 해줘」
 *
 * ⛔ 생김새는 자동적용 껍데기(`setup.css` 의 `.gs-*`)를 «그대로» 따랐다 — 값도 같은 값이다.
 *    다만 그 파일은 남의 레인 것이라 «가져다 쓰지 않고» 여기 같은 값으로 다시 적었다.
 * ⚠️ 자동적용은 한 껍데기가 iframe 여덟 장을 갈아 끼운다. 우리는 화면 셋이 «각자 한 장»이라
 *    껍데기를 만들지 않고 «띠만» 세 장에 얹는다 — 그래서 칩은 버튼이 아니라 링크다.
 */
.ft-top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px;
  background: rgba(13, 15, 18, .93);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #232a33;
  font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Pretendard',
    'Malgun Gothic', system-ui, sans-serif;
}
.ft-brand { font-size: 13px; font-weight: 700; letter-spacing: -.01em; flex: none; color: #e7ecf2; }
.ft-brand i { font-style: normal; color: #6b7889; font-weight: 600; margin-left: 6px; font-size: 12px; }

.ft-jump { display: flex; gap: 5px; flex: 1; flex-wrap: wrap; }
.ft-j {
  width: 25px; height: 25px; border-radius: 7px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid #232a33;
  color: #6b7889; font-size: 11.5px; font-weight: 700;
  font-family: inherit; text-decoration: none; line-height: 1;
}
.ft-j:hover { border-color: #93a1b1; color: #e7ecf2; }
.ft-j.on { background: #c6f24e; border-color: #c6f24e; color: #18200a; }
.ft-j:focus-visible { outline: 2px solid #c6f24e; outline-offset: 2px; }

.ft-state { flex: none; font-size: 12px; color: #93a1b1; min-width: 0; }
.ft-state b { color: #e7ecf2; font-weight: 600; }

/* 나가는 길. 눈에 띄되 «다음으로 가는 버튼»보다 세면 안 된다 — 그래서 라임을 안 쓴다.
   (자동적용 껍데기의 `.gs-out` 과 같은 까닭·같은 값) */
.ft-out {
  flex: none; font-size: 12px; color: #93a1b1; text-decoration: none;
  border: 1px solid #232a33; border-radius: 7px; padding: 5px 11px; line-height: 1;
}
.ft-out:hover { border-color: #93a1b1; color: #e7ecf2; }

@media (max-width: 760px) {
  .ft-top { flex-wrap: wrap; gap: 9px; }
  .ft-state { width: 100%; order: 3; }
}