/* ═══════════════════════════════════════════════════════════════
   getcall.css v3 — Aclovis Call 통합 통화 허브
   이 페이지는 본 파일이 100% 소유 (main.css/getstyle.css 미링크).
   패밀리 토큰: 딥퍼플 배경 · #ec4899→#8b5cf6 그라데이션 · 라운드 카드.
   시그니처: "라이브 링" — 상대를 감싸는 링이 통화 상태에 따라 숨쉬고,
             통화 중에는 실제 목소리 크기(--lvl)로 살아 움직인다.
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }   /* ⚠️ 필수 가드 — 오버레이 사고 방지 */

/* 🎨 패밀리 토큰 정렬 (v4) — getstyle.css :root 와 1:1 동일 값.
   스타일/아바타/스티커에서 넘어와도 "같은 서비스"로 느껴지게 하는 근거. */
:root {
  --bg0: #312450;                       /* getstyle --dark-bg */
  --bg1: #3a2b5e;
  --card: rgba(255, 255, 255, 0.05);    /* getstyle --card-bg */
  --line: rgba(255, 255, 255, 0.15);    /* getstyle --border-color */
  --text: #ffffff;                      /* getstyle --text-primary */
  --dim: rgba(255, 255, 255, 0.7);      /* getstyle --text-secondary */
  --grad: linear-gradient(135deg, #5e42a6 0%, #b74e91 100%);   /* --primary-gradient */
  --grad-r: linear-gradient(135deg, #b74e91 0%, #5e42a6 100%); /* --secondary-gradient */
  --pink: #b74e91;                      /* getstyle --accent-pink */
  --violet: #5e42a6;                    /* getstyle --accent-purple */
  --green: #22c55e; --red: #ef4444;
  --radius-md: 0.5rem;                  /* 패밀리 갤러리 카드 라운드 */
  --lvl: 0;   /* 오디오 레벨 0~1 — JS가 통화 중 갱신 */
}

html, body {
  min-height: 100%;
  background:
    radial-gradient(120% 60% at 50% -5%, rgba(94, 66, 166, 0.35), transparent 60%),
    radial-gradient(90% 50% at 50% 108%, rgba(183, 78, 145, 0.22), transparent 60%),
    var(--bg0);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'Apple SD Gothic Neo', sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
img, video { display: block; }

/* 📐 메인 스테이지 크기 = 패밀리(getstyle .style-image-wrapper)와 동일.
   폭 계산: 스테이지 + 25px(우측 아이콘메뉴 오버행) + 32px(페이지 좌우 패딩).
     데스크톱 650px → 707 / ≤980px 525px → 582 / ≤820px 450px → 507 / 모바일 = 화면폭
   (브레이크포인트·목표폭 모두 getstyle.css 실측값을 그대로 옮긴 것) */
.gc-page {
  max-width: 707px;
  margin: 0 auto;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 16px calc(110px + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 980px) { .gc-page { max-width: 582px; } }
@media (max-width: 820px) { .gc-page { max-width: 507px; } }
@media (max-width: 560px) { .gc-page { max-width: 100%; } }

/* ═══ 헤더 ═══
   패밀리(getstyle .avatar-header / .title / .subtitle / .page-back-btn)와 1:1 동일.
   가운데 정렬 · weight 300 · 2.5rem(≤736px 1.75rem) · 하단 구분선 ·
   뒤로가기 버튼은 별도 좌측이 아니라 '타이틀 안 인라인'.
   ⚠️ 기존 그라데이션 텍스트(-webkit-text-fill-color:transparent)는 제거해야
      패밀리와 같은 흰색 타이틀이 나온다. */
.gc-header {
  position: relative;
  text-align: center;
  width: 100%;
  padding: 1.5rem 0;                       /* = --spacing-md */
  margin-bottom: 3rem;                     /* = --spacing-xl */
  border-bottom: solid 1px var(--line);    /* = --border-color */
}
.gc-title {
  font-size: 2.5rem;
  font-weight: 300;
  letter-spacing: 0.075em;
  margin-bottom: 1rem;                     /* = --spacing-sm */
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  color: var(--text);
}
.gc-back {                                  /* = .page-back-btn */
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1rem;
  transition: background 0.18s, border-color 0.18s;
  vertical-align: middle;
  margin-right: 10px;
  flex-shrink: 0;
}
.gc-back:hover { background: rgba(255, 255, 255, 0.13); border-color: rgba(255, 255, 255, 0.2); }
.gc-subtitle {
  font-size: 1.1rem;
  color: var(--dim);
  font-weight: 300;
  letter-spacing: 0.05em;
}
/* 음성메모함은 패밀리에 없는 getcall 전용 액션 — 가운데 정렬 타이틀을 밀지 않도록
   헤더 우측에 절대배치한다(중앙 정렬 유지가 패밀리 일관성의 핵심). */
.gc-hdr-btn { position: absolute; right: 0; top: 1.5rem; }
@media (max-width: 736px) {
  .gc-header { padding: 1.1rem 0; margin-bottom: 1.6rem; }
  .gc-title { font-size: 1.75rem; gap: 0.35rem; margin-bottom: 0.6rem; }
  .gc-subtitle { font-size: 0.95rem; }
  .gc-hdr-btn { top: 1.1rem; }
}
/* '미리보기' 배지는 정식 전환(index.html Start AI Call 진입점화)으로 제거됨.
   다시 필요하면 헤더에 아래 마크업만 되살리면 된다:
   <span class="gc-preview-pill"><span class="gc-preview-dot"></span>미리보기</span> */
.gc-preview-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  color: #fcd34d; border: 1px solid rgba(252, 211, 77, 0.35);
  background: rgba(252, 211, 77, 0.08);
  padding: 4px 9px; border-radius: 999px; flex-shrink: 0;
}
.gc-preview-dot { width: 5px; height: 5px; border-radius: 50%; background: #fcd34d; animation: gcBlink 1.6s infinite; }
@keyframes gcBlink { 50% { opacity: 0.25; } }

/* ═══ 스테이지 ═══ */
/* 우측 아이콘 메뉴가 스테이지 우측에 "반쯤 걸치도록"(패밀리 문법) 여백 확보.
   .gc-stage 는 overflow:hidden(영상 클리핑) 이므로 메뉴는 이 행의 자식이어야 함. */
.gc-stage-row { position: relative; padding-right: 25px; }
.gc-stage {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 26px;
  border: 1px solid var(--line);
  background: linear-gradient(178deg, #3d2e5f 0%, #2b2047 70%, #241a3c 100%);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.gc-aura {
  position: absolute; inset: -30%;
  background:
    radial-gradient(38% 30% at 50% 30%, rgba(139, 92, 246, 0.28), transparent 70%),
    radial-gradient(30% 24% at 62% 62%, rgba(236, 72, 153, 0.14), transparent 70%);
  filter: blur(6px);
  animation: gcAura 9s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes gcAura { from { transform: translateY(-2%) scale(1); } to { transform: translateY(3%) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .gc-aura, .gc-ring::before, .gc-pulse { animation: none !important; } }

/* ── idle 카드 ── */
.gc-idle {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 13px; padding: 26px 22px 30px; text-align: center;
}

/* 시그니처: 라이브 링 */
.gc-ring {
  position: relative;
  width: 138px; height: 138px; flex-shrink: 0;
  border-radius: 50%;
  padding: 5px;
  background: var(--grad);
  box-shadow:
    0 0 calc(28px + var(--lvl) * 46px) rgba(94, 66, 166, calc(0.45 + var(--lvl) * 0.45)),
    0 0 calc(56px + var(--lvl) * 70px) rgba(183, 78, 145, calc(0.20 + var(--lvl) * 0.3));
  transform: scale(calc(1 + var(--lvl) * 0.05));
  transition: box-shadow 0.12s linear, transform 0.12s linear;
}
.gc-ring::before {
  content: '';
  position: absolute; inset: -9px;
  border-radius: 50%;
  border: 1.5px solid rgba(196, 181, 253, 0.35);
  animation: gcBreath 3.6s ease-in-out infinite;
}
@keyframes gcBreath {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50% { transform: scale(1.07); opacity: 0.15; }
}
.gc-ring.is-ringing::before { animation: gcBreath 1.1s ease-in-out infinite; }
.gc-avatar {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a3878, #2a1f45);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  font-size: 52px;
  color: rgba(255, 255, 255, 0.85);
}
.gc-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ── AI비서 오브 ──
   🧠 이모지(공포감·비상업적) 대체. 브랜드 그라데이션 구체 + 화이트 스파클
   = 현행 AI 제품들의 표준 시각언어. 폰트/이모지 의존 없는 인라인 SVG. */
.gc-avatar.is-ai {
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 40%),
    radial-gradient(circle at 44% 36%, #c76aa4 0%, #8d4f9e 44%, #4b3488 100%);
}
/* 수화기 + 우상단 스파클. 크기는 부모 font-size 기준 em 이라 오브/썸네일 모두 자동 비례. */
.gc-ai-mark {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
  filter: drop-shadow(0 2px 7px rgba(35, 12, 45, 0.45));
}
.gc-ai-mark i { font-size: 0.82em; color: #fff; }
.gc-ai-spark {
  position: absolute; top: -0.20em; right: -0.30em;
  width: 0.40em; height: 0.40em;
  fill: #fff;
}
/* 스토리바용 미니 오브 */

.gc-name { font-size: 27px; font-weight: 800; letter-spacing: -0.02em; }
.gc-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em;
  color: #e9d5ff;
  border: 1px solid rgba(94, 66, 166, 0.7);
  background: rgba(94, 66, 166, 0.28);
  padding: 5px 13px; border-radius: 999px;
  transition: all 0.15s;
}
.gc-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
/* AI비서일 때만 탭 가능(=수신 설정 진입). 셰브런으로 '눌러진다'를 알린다. */
.gc-badge-chev { display: none; font-size: 9px; opacity: 0.65; margin-left: -1px; }
.gc-badge.is-tappable { cursor: pointer; }
.gc-badge.is-tappable .gc-badge-chev { display: inline-block; }
.gc-badge.is-tappable:hover { background: rgba(94, 66, 166, 0.45); border-color: var(--pink); }
.gc-badge.is-tappable:active { transform: scale(0.97); }
.gc-desc { font-size: 12.5px; line-height: 1.65; color: var(--dim); }

.gc-cta-row { display: flex; gap: 10px; margin-top: 6px; width: 100%; max-width: 300px; }
.gc-cta {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 10px;
  border-radius: 16px;
  font-size: 14.5px; font-weight: 800;
  color: #fff;
  transition: transform 0.12s;
}
.gc-cta:active { transform: scale(0.96); }
.gc-cta-voice { background: var(--grad); box-shadow: 0 10px 26px rgba(139, 92, 246, 0.4); }
.gc-cta-video {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.gc-cta-ghost { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16); }
.gc-cta-voice { box-shadow: 0 10px 26px rgba(94, 66, 166, 0.45); }

/* 헤더 아이콘 버튼(음성메모함) — 스테이지에서 빼낸 관리 기능의 새 자리.
   ⚠️ position 은 여기서 선언하지 않는다. 위쪽 헤더 블록의 `position:absolute`(우측 고정)가
      뒤에 오는 이 규칙에 덮여 중앙정렬이 깨졌던 버그가 있었음. 배지 앵커는 absolute 로도 동작. */
.gc-hdr-btn {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: var(--card);
  font-size: 15px; color: var(--text);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.gc-hdr-btn:hover { background: rgba(255, 255, 255, 0.1); }
.gc-hdr-btn:active { transform: scale(0.94); }
.gc-hdr-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--pink); border: 2px solid var(--bg0);
  color: #fff; font-size: 10px; font-weight: 800; line-height: 14px;
  display: flex; align-items: center; justify-content: center;
}

/* ── live(통화 중) ── */
.gc-live { position: absolute; inset: 0; display: flex; flex-direction: column; }
.gc-remote-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.gc-live-center {
  position: relative; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 11px; padding: 24px; text-align: center;
}
.gc-live.has-video .gc-live-center {
  justify-content: flex-start;
  padding-top: 18px;
  background: linear-gradient(180deg, rgba(10, 6, 20, 0.55), transparent 45%);
}
.gc-live.has-video .gc-ring { display: none; }
.gc-live.has-video .gc-name { font-size: 17px; }
.gc-live-status { font-size: 13.5px; color: var(--dim); }
.gc-live.has-video .gc-live-status { color: rgba(255, 255, 255, 0.75); }
.gc-live-timer { font-size: 15px; font-weight: 700; color: #4ade80; font-variant-numeric: tabular-nums; }
.gc-live-note { font-size: 11px; color: rgba(237, 233, 248, 0.4); }
.gc-rec-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.09em;
  color: #fca5a5; background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.4);
  padding: 4px 11px; border-radius: 999px;
}
.gc-rec-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); animation: gcBlink 1.2s infinite; }

.gc-self-video {
  position: absolute; right: 12px; bottom: 100px;
  width: 96px; aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
  z-index: 3;
  background: #000;
}

.gc-live-actions {
  position: relative; z-index: 4;
  display: flex; align-items: center; justify-content: center; gap: 34px;
  padding: 0 20px 24px;
}
.gc-round {
  width: 62px; height: 62px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #fff;
  transition: transform 0.12s;
}
.gc-round:active { transform: scale(0.94); }
.gc-round-green { background: var(--green); box-shadow: 0 8px 26px rgba(34, 197, 94, 0.45); }
.gc-round-red { background: var(--red); box-shadow: 0 8px 26px rgba(239, 68, 68, 0.4); }
.gc-round-dark { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.18); }
.gc-round-dark.is-off { background: rgba(239, 68, 68, 0.28); border-color: rgba(239, 68, 68, 0.5); }
.gc-round-wide { width: 72px; height: 72px; }
.gc-pulse { animation: gcPulse 1.35s ease-in-out infinite; }
@keyframes gcPulse { 50% { transform: scale(1.1); } }

/* ── 우측 AI 서비스 스택 ──
   패밀리 .icon-menu-container / .icon-menu-btn (ai-features.css) 와 동일 사양:
   퍼플→핑크 글래스 알약 · blur(20px) · radius 50px · 흰색 단색 아이콘.
   차이점 1가지: 통화 트랙은 아이콘만으로 식별이 어려워 라벨을 상시 노출(사장님 확정). */
.gc-side {
  position: absolute; right: 25px; top: 50%;
  transform: translate(50%, -50%);
  display: flex; flex-direction: column; gap: 9px;
  padding: 10px 6px;
  border-radius: 50px;
  background: linear-gradient(135deg, rgba(94, 66, 166, 0.45) 0%, rgba(183, 78, 145, 0.45) 100%);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(183, 78, 145, 0.4);
  box-shadow: 0 8px 32px rgba(94, 66, 166, 0.2);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 20;
}
.gc-side:hover {
  background: linear-gradient(135deg, rgba(94, 66, 166, 0.65) 0%, rgba(183, 78, 145, 0.65) 100%);
  border-color: rgba(183, 78, 145, 0.6);
  box-shadow: 0 12px 40px rgba(94, 66, 166, 0.35);
}
.gc-side-btn {
  width: 38px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 0; border-radius: 19px;
  color: rgba(255, 255, 255, 0.9);
  transition: all 0.2s ease;
}
.gc-side-btn:hover { color: #fff; transform: scale(1.08); background: rgba(255, 255, 255, 0.12); }
.gc-side-btn:active { transform: scale(0.95); }
.gc-side-btn i {
  width: 38px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.gc-side-btn em {
  font-style: normal; font-size: 9px; font-weight: 700; line-height: 1;
  color: rgba(255, 255, 255, 0.82); letter-spacing: -0.03em;
  padding-bottom: 3px; white-space: nowrap;
}
.gc-side-btn:hover em { color: #fff; }

/* ═══ 액션바 (한 줄) ═══
   좌=대상 선택(AI비서·친구) │ 우=기능(검색·주소록·다자통화).
   두 줄로 나눌 이유가 없어 한 줄로 합치고, 역할이 다르므로 세로 구분선으로 분리.
   기존 '추가(+)' 썸네일은 주소록 버튼과 같은 openContacts 호출 → 중복이라 제거함.
   모든 원형은 46px 로 통일(패밀리 .share-icon-circle 사양). */
.gc-actionbar {
  display: flex; align-items: flex-start; justify-content: center;
  gap: 12px;
  margin: 0.9rem 0 0.2rem;
}
/* 좌측 '대상 선택' 줄 제거로 액션바는 기능 3개만 남는다 →
   나눌 대상이 없으므로 세로 구분선·좌패딩도 함께 제거(안 지우면 허공에 선이 뜬다). */
.gc-actions {
  display: flex; align-items: flex-start; gap: 12px;
  flex: 0 0 auto;
}

/* .gc-story* (액션바 대상 선택 썸네일) 제거 — 최근 통화 카드로 통합(2026-07-28) */

/* ═══ 메인 아래 기능 버튼 ═══
   패밀리 .social-share-row / .share-icon-circle (getstyle.css) 와 동일 사양:
   46px 그라데이션 원형 · 흰 아이콘 1.25rem · hover 시 -3px 부양 + 원형 1.08 확대.
   라벨만 상시 노출(패밀리는 display:none — 사장님 확정). */
.gc-util {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.3rem;
  flex: 0 0 auto; width: 56px;
  background: transparent; border: none; padding: 0;
  transition: all 0.3s ease;
}
.gc-util:hover { transform: translateY(-3px); }
.gc-util:active { transform: translateY(0) scale(0.95); }
.gc-util-ic {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; color: #fff;
  background: var(--c, var(--grad));
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}
.gc-util:hover .gc-util-ic { transform: scale(1.08); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); }
.gc-util-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--dim); white-space: nowrap;
}
.gc-util:hover .gc-util-label { color: #fff; }

/* ═══ 통화 이력 = 패밀리 갤러리 ═══
   .avatar-gallery-section / .gallery-header / .avatar-gallery / .gallery-item
   (getstyle.css) 와 동일 사양: 가운데 정렬 헤더 + 밑줄, 1:1 정사각 격자. */
.gc-history-sec {
  margin-top: 30px;
  display: flex; flex-direction: column; align-items: center;
}
.gc-sec-title {
  width: 100%;
  text-align: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: solid 1px var(--line);
}
.gc-sec-title h3 {
  font-size: 1.5rem; font-weight: 300; letter-spacing: 0.075em;
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.gc-sec-title i { color: var(--pink); }
.gc-sec-title small {
  display: block; margin-top: 4px;
  font-size: 11px; font-weight: 600; color: var(--dim); letter-spacing: 0;
}

/* ── 자주 통화(퀵다이얼) CSS 제거됨(2026-07-28) ──
   상단 액션바 대상 목록과 같은 사람이 두 번 노출되는 중복이라 줄 자체를 없앴다.
   '자주 거는 사람이 앞에 온다'는 이점은 액션바 정렬(sortedFriends)로 흡수. */

/* ── 필터 칩 ── 부재중을 한 번에 걸러보는 진입점. */
.gc-filters {
  display: flex; gap: 8px; width: 100%;
  margin-bottom: 13px;
  overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.gc-filters::-webkit-scrollbar { display: none; }
.gc-chip-f {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 13px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--dim);
  background: var(--card); border: 1px solid var(--line);
  transition: all 0.2s;
}
.gc-chip-f em {
  font-style: normal; font-size: 10px; font-weight: 800;
  opacity: 0.75;
}
.gc-chip-f:hover { color: #fff; border-color: rgba(183, 78, 145, 0.6); }
.gc-chip-f.is-on {
  color: #fff; background: var(--grad); border-color: transparent;
  box-shadow: 0 4px 14px rgba(94, 66, 166, 0.45);
}
.gc-chip-f.is-on em { opacity: 0.9; }

.gc-history {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  justify-content: center;
  gap: 12px;
  width: 100%;
}

/* ── 갤러리 카드(1:1) ── */
.gc-h-item {
  position: relative;
  aspect-ratio: 1;
  background: var(--card);
  border: solid 1px var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.gc-h-item:hover { border-color: var(--pink); transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.38); }
/* 지금 스테이지에 올라와 있는 상대 — 옛 액션바 대상선택의 'is-on' 역할을 카드가 이어받음.
   ⚠️ ::before 는 부재중 오버레이가, ::after 는 하단 그라데이션이 이미 쓰고 있으므로
      pseudo-element 를 쓰지 않고 링(box-shadow)만으로 표시한다(충돌 방지). */
.gc-h-item.is-on {
  border-color: var(--pink);
  box-shadow: 0 0 0 2px var(--pink), 0 10px 26px rgba(94, 66, 166, 0.45);
}
.gc-h-item:active { transform: translateY(0) scale(0.98); }
.gc-h-item:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }

/* 상대 사진이 카드를 꽉 채움 (갤러리 이미지 자리) */
.gc-h-av {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 28%, #4a3878, #2a1f45);
  font-size: 1.9rem; font-weight: 300; letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
}
.gc-h-av img { width: 100%; height: 100%; object-fit: cover; }
/* 하단 정보 가독성용 그라데이션 */
.gc-h-item::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
  background: linear-gradient(to top, rgba(20, 13, 38, 0.92) 0%, rgba(20, 13, 38, 0.62) 45%, transparent 100%);
  pointer-events: none;
}

/* 좌상단 발신/수신/부재 배지 */
.gc-h-dir {
  position: absolute; left: 8px; top: 8px; z-index: 2;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.gc-h-dir.is-out { background: var(--violet); }
.gc-h-dir.is-in { background: var(--green); }
.gc-h-dir.is-miss { background: var(--red); }
.gc-h-dir.is-ai { background: var(--grad); }
/* AI비서와의 대화 카드 — 썸네일이 사진이 아니라 브랜드 오브 */
.gc-h-item.is-ai .gc-h-av {
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 40%),
    radial-gradient(circle at 44% 36%, #c76aa4 0%, #8d4f9e 44%, #4b3488 100%);
  font-size: 34px;
}

/* 우상단 기록/메모 칩 */
.gc-h-chip {
  position: absolute; right: 8px; top: 8px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9px; font-weight: 800;
  color: #e9d5ff; border: 1px solid rgba(94, 66, 166, 0.7);
  background: rgba(94, 66, 166, 0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 3px 7px; border-radius: 999px;
}
.gc-h-chip.is-memo { color: #fbcfe8; border-color: rgba(183, 78, 145, 0.75); background: rgba(183, 78, 145, 0.55); }

/* 하단 정보 */
.gc-h-info {
  position: absolute; left: 10px; right: 46px; bottom: 9px; z-index: 2;
  min-width: 0;
}
.gc-h-name { display: block; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-h-sub {
  display: block; margin-top: 2px;
  font-size: 10.5px; color: rgba(255, 255, 255, 0.72);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gc-h-sub.is-miss { color: #fca5a5; }
.gc-h-time {
  display: block; margin-top: 1px;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.5);
}

/* 부재중 — 격자에서 한눈에 잡히도록 카드 자체를 붉게 표시(이력 핵심 용도 ②) */
.gc-h-item.is-missed { border-color: rgba(239, 68, 68, 0.55); }
.gc-h-item.is-missed::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(239, 68, 68, 0.22), transparent 55%);
  pointer-events: none;
}
.gc-h-item.is-missed:hover { border-color: rgba(239, 68, 68, 0.9); }

/* 우하단 퀵액션 — 평소엔 음성 버튼만 보이고, 호버/포커스 시 영상까지 펼쳐진다.
   터치 기기는 호버가 없으므로 항상 펼친 상태로 둔다(아래 hover:none 쿼리). */
/* ⚠️ 세로(column-reverse) 배치 — 카드가 150px로 좁아 가로로 두면 이름·상태 텍스트와
   충돌한다. 음성 버튼은 항상 우하단 고정, 영상은 그 '위로' 펼쳐진다. */
.gc-h-quick {
  position: absolute; right: 9px; bottom: 9px; z-index: 3;
  display: flex; flex-direction: column-reverse; align-items: center; gap: 6px;
}
.gc-h-qbtn {
  position: relative;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(34, 197, 94, 0.45);
  background: rgba(34, 197, 94, 0.22);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #4ade80; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s ease;
}
/* 히트 영역만 44px 로 확장(시각 크기는 36px 유지) — 좁은 카드에서 탭 실패 방지 */
.gc-h-qbtn::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; }
.gc-h-qbtn:hover { background: rgba(34, 197, 94, 0.42); color: #bbf7d0; transform: scale(1.1); }
.gc-h-qbtn:active { transform: scale(0.94); }
.gc-h-qbtn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* ⚠️ 영상 버튼은 '항상 눌 수 있는' 상태로 둔다.
   호버로 나타나게 하면 hover:hover 로 보고하는 터치 하이브리드 단말·에뮬레이터에서
   영영 접근 못 하는 사고가 난다. 대신 평소엔 살짝 눌러 두고(축소·반투명)
   호버/포커스 시 또렷해지게 해 시각적 소음만 줄인다. */
.gc-h-qbtn.is-video {
  border-color: rgba(183, 78, 145, 0.55);
  background: rgba(183, 78, 145, 0.28);
  color: #f9c6e4;
  opacity: 0.62;   /* ⚠️ scale 축소 금지 — transform 은 히트 영역까지 줄인다 */
}
.gc-h-item:hover .gc-h-qbtn.is-video,
.gc-h-item:focus-within .gc-h-qbtn.is-video { opacity: 1; }
.gc-h-qbtn.is-video:hover { background: rgba(183, 78, 145, 0.5); color: #fff; transform: scale(1.1); }

/* 빈 상태 — 격자 전체 폭 차지 */
.gc-h-empty {
  grid-column: 1 / -1;
  padding: 34px 16px;
  border-radius: var(--radius-md);
  border: 1px dashed var(--line);
  text-align: center;
  color: var(--dim); font-size: 12.5px; line-height: 1.7;
}
.gc-h-empty b { color: var(--text); }

/* ═══ 검색 오버레이 ═══ */
.gc-search-ov {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(10, 6, 20, 0.82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: calc(18px + env(safe-area-inset-top, 0px)) 16px 16px;
}
.gc-search-box {
  max-width: 520px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  border-radius: 16px;
  border: 1px solid rgba(139, 92, 246, 0.5);
  background: #1c1333;
  padding: 13px 14px;
}
.gc-search-box i { color: var(--dim); font-size: 14px; }
.gc-search-box input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--text); font-size: 15px;
}
.gc-search-box button { color: var(--dim); font-size: 16px; }
.gc-search-list { max-width: 520px; margin: 12px auto 0; list-style: none; }
.gc-search-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 8px; border-radius: 14px; cursor: pointer;
}
.gc-search-item:active { background: rgba(255, 255, 255, 0.07); }
.gc-search-item-av {
  width: 40px; height: 40px; border-radius: 50%;
  background: #241a44;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; overflow: hidden; flex-shrink: 0;
}
.gc-search-item-av img { width: 100%; height: 100%; object-fit: cover; }
.gc-search-empty { padding: 26px; text-align: center; color: var(--dim); font-size: 13px; }

/* ═══ 토스트 ═══ */
.gc-toast {
  position: fixed; left: 50%; bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 99;
  padding: 11px 20px; border-radius: 999px;
  background: rgba(30, 22, 52, 0.97);
  border: 1px solid rgba(139, 92, 246, 0.5);
  color: var(--text); font-size: 13px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s;
}

/* 데스크톱 폭 — 카드 유지. 갤러리는 auto-fill 이 폭에 맞춰 자동 증열(패밀리 동작) */
/* (구 데스크톱 폭 560px 규칙 제거 — 위쪽 패밀리 정렬 브레이크포인트가 대신한다) */

/* 넓은 화면에서는 스테이지가 커진 만큼 내부 요소도 함께 키운다.
   안 그러면 867px 스테이지 한가운데 138px 오브만 떠서 휑해 보인다. */
@media (min-width: 821px) {
  .gc-ring { width: 186px; height: 186px; }
  .gc-avatar { font-size: 70px; }
  .gc-name { font-size: 34px; }
  .gc-badge { font-size: 13px; padding: 7px 16px; }
  .gc-desc { font-size: 14.5px; }
  .gc-cta-row { max-width: 380px; }
  .gc-cta { padding: 16px 12px; font-size: 16px; border-radius: 18px; }
}

/* 소형 단말 — 패밀리(ai-features.css @768px)와 동일하게 아이콘 축소 */
@media (max-width: 360px) {
  .gc-side { gap: 8px; padding: 8px 5px; }
  .gc-side-btn { width: 34px; }
  .gc-side-btn i { width: 34px; height: 27px; font-size: 15px; }
  .gc-side-btn em { font-size: 8.5px; }
  .gc-actionbar { gap: 8px; }
  .gc-actions { gap: 9px; }
  .gc-util { width: 50px; }
  .gc-util-ic { width: 42px; height: 42px; font-size: 1.1rem; }
  .gc-history { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
}