/* ═══════════════════════════════════════
   GLOBAL TAB BAR — 구조/레이아웃
   시각 커스터마이징 → tabbar-theme.css
═══════════════════════════════════════ */

/* 오른쪽 사이드 플로팅 글라스 탭바 */
.tabbar {
  position: fixed;
  right: var(--app-right);
  top: 50%;
  width: var(--tb-width);
  height: var(--tb-height);
  z-index: 20;
  border-radius: var(--tb-radius);
  overflow: hidden;

  /* iOS vibrancy glass */
  background: var(--tb-bg);
  backdrop-filter: blur(var(--tb-blur)) saturate(var(--tb-saturate)) brightness(var(--tb-brightness));
  -webkit-backdrop-filter: blur(var(--tb-blur)) saturate(var(--tb-saturate)) brightness(var(--tb-brightness));

  /* 테두리: 왼쪽 캐치라이트 + 전체 미세선 */
  border: 1px solid var(--tb-border-side);
  box-shadow:
    var(--tb-shadow),
    inset 1px 0 0 var(--tb-border-top);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 14px 0;

  /* 기본: 오른쪽 화면 밖으로 완전히 숨음 (손잡이만 노출) */
  transform: translateY(-50%) translateX(110%);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.3s ease;
}

/* 펼쳐진 상태 — spring으로 뿅 */
.tabbar.open {
  transform: translateY(-50%) translateX(-8px);
  opacity: 1;
  pointer-events: auto;
}

/* ── 볼록한 타원형 손잡이 — 평소엔 이것만 보임, 누르면 탭바 등장 ── */
#tabbar-handle {
  position: fixed;
  right: var(--app-right);
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 60px;
  z-index: 21;
  border-radius: 40px 0 0 40px;   /* 왼쪽으로 볼록한 반-캡슐 */
  cursor: pointer;

  background: var(--tb-bg);
  backdrop-filter: blur(var(--tb-blur)) saturate(var(--tb-saturate)) brightness(var(--tb-brightness));
  -webkit-backdrop-filter: blur(var(--tb-blur)) saturate(var(--tb-saturate)) brightness(var(--tb-brightness));
  border: 1px solid var(--tb-border-side);
  border-right: none;
  box-shadow:
    -4px 0 14px rgba(0, 0, 0, 0.40),
    inset 1px 0 0 var(--tb-border-top);

  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s var(--spring), transform 0.3s var(--spring);
}
#tabbar-handle:active { transform: translateY(-50%) scale(0.94); }

/* 탭바가 열리면 손잡이는 사라짐 */
#tabbar-handle.hidden {
  opacity: 0;
  transform: translateY(-50%) translateX(12px);
  pointer-events: none;
}

/* 왼쪽 향한 꺾쇠 ‹ — "당겨서 펼치기" 힌트 */
.handle-grip {
  width: 7px;
  height: 7px;
  border-left: 2px solid rgba(255, 255, 255, 0.6);
  border-top: 2px solid rgba(255, 255, 255, 0.6);
  transform: rotate(-45deg);
  margin-left: 5px;
}

/* 글라스 왼쪽 반사광 레이어 */
.tabbar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    100deg,
    var(--tb-shine) 0%,
    transparent 40%
  );
  pointer-events: none;
}

.tab {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.tab:active { opacity: 0.55; }

.tab-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--tb-icon-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.35);
  transition: background 0.3s var(--spring), color 0.3s var(--spring);
}
.tab.on .tab-icon {
  background: var(--accent-tint);
  color: var(--accent);
}

/* ── 대기 화면 내부 탭바 (position:absolute — screen 기준) ── */
#waiting-tabbar-handle {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 26px; height: 60px; z-index: 51; border-radius: 40px 0 0 40px; cursor: pointer;
  background: var(--tb-bg);
  backdrop-filter: blur(var(--tb-blur)) saturate(var(--tb-saturate)) brightness(var(--tb-brightness));
  -webkit-backdrop-filter: blur(var(--tb-blur)) saturate(var(--tb-saturate)) brightness(var(--tb-brightness));
  border: 1px solid var(--tb-border-side); border-right: none;
  box-shadow: -4px 0 14px rgba(0,0,0,.40), inset 1px 0 0 var(--tb-border-top);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s var(--spring);
}
#waiting-tabbar-handle:active { transform: translateY(-50%) scale(0.94); }
#waiting-tabbar-handle.hidden { opacity: 0; transform: translateY(-50%) translateX(12px); pointer-events: none; }
#waiting-tabbar { z-index: 50; }

/* ── 탭 아이콘 모양 ── */
[class^="ti-"] {
  display: block; position: relative; margin: 0 auto; color: inherit;
}
.ti-home-dot { width: 14px; height: 14px; background: currentColor; border-radius: 3px; }
.ti-bolt {
  width: 10px; height: 17px; background: currentColor;
  clip-path: polygon(68% 0%, 18% 52%, 52% 48%, 32% 100%, 82% 48%, 48% 52%);
}
.ti-vote {
  width: 14px; height: 14px; border: 2px solid currentColor; border-radius: 50%;
}
.ti-users { width: 18px; height: 16px; }
.ti-users::before {
  content: ''; display: block;
  width: 9px; height: 9px; background: currentColor; border-radius: 50%; margin: 0 auto;
}
.ti-users::after {
  content: ''; display: block;
  width: 15px; height: 6px; background: currentColor; border-radius: 4px 4px 0 0;
  margin: 2px auto 0;
}
.ti-book {
  width: 14px; height: 17px; background: currentColor;
  border-radius: 1px 3px 3px 1px; box-shadow: -3px 0 0 currentColor;
}