/* ⚡ G.A.L.V.I.S. — Galla's A Little Very Intelligent System. 마블 자비스 HUD 오마주(시안 링+앰버 코어)
   + GALLA 진영(레드vs블루) 톤. SPA(앱) 전용. 페르소나는 '친구', 껍데기는 홀로그램 HUD.
   ⚠️ 레이아웃·키보드 규칙(--fr-vvh, fr-kb-anim, fr-chatting)은 검증된 것 — 스킨만 바꾸고 건드리지 말 것. */
:root{
  --fr-cy:#5fd8ff;                 /* HUD 시안 */
  --fr-cy-dim:rgba(95,216,255,.22);
  --fr-am:#ffb45c;                 /* 아크 코어 앰버 */
  --fr-bg:#04070d; --fr-glass:rgba(10,16,26,.92);
  --fr-txt:#eaf6ff; --fr-dim:#7f97a8;
}

/* ── 아크 리액터 오브(런처) ───────────────────────────── */
#frOrb{
  position:fixed; right:14px; z-index:940;
  bottom:calc(env(safe-area-inset-bottom,0px) + 74px);
  width:56px; height:56px; border-radius:50%; border:none; padding:0; cursor:pointer;
  background:radial-gradient(circle at 50% 45%, rgba(18,32,48,.96) 0%, rgba(6,10,18,.98) 70%);
  box-shadow:0 0 18px rgba(95,216,255,.45), 0 0 46px rgba(95,216,255,.18), inset 0 0 14px rgba(95,216,255,.25);
  display:grid; place-items:center;
  transition:transform .18s cubic-bezier(.2,.8,.2,1), opacity .2s;
  -webkit-tap-highlight-color:transparent;
}
#frOrb:active{ transform:scale(.9); }

/* 🔴 하단 고정 컴포저가 있는 화면에서는 오브를 위로 올린다.
   광장 상세의 .comment-write 는 bottom 78px~146px 에 떠 있고 오브는 74px~130px —
   오브가 정확히 '등록' 버튼 자리를 덮어 **댓글을 올릴 방법이 없었다**(실측 2026-08-28 iOS 앱).
   입력 중에는 friend.js 가 오브를 숨기지만, 키보드를 내린 뒤에도 가려선 안 된다. */
body:has(.comment-write) #frOrb,
body:has(#shortsCommentModal.visible) #frOrb{
  bottom: calc(env(safe-area-inset-bottom,0px) + 156px);
}
#frOrb.fr-hidden{ opacity:0; pointer-events:none; transform:scale(.6); }

/* 🌐 웹 전용 — 헤더 '앱 받기'(다운로드 트리거). 앱(=fr-web 아님)에선 숨김. */
.fr-getapp{ display:none; }
body.fr-web .fr-getapp{
  display:inline-flex; align-items:center; height:28px; padding:0 12px; margin:0 4px 0 2px;
  border:1px solid var(--fr-cy); background:rgba(95,216,255,.12); color:var(--fr-cy);
  font-size:12.5px; font-weight:800; border-radius:999px; cursor:pointer; white-space:nowrap;
}
body.fr-web .fr-getapp:active{ transform:scale(.95); }
/* 📲 대화 중 앱 설치 유도 칩 — 다른 칩보다 도드라지게(그라데이션 채움) */
.fr-getapp-chip{ background:linear-gradient(135deg,#4361ff,#5b8cff)!important; border-color:transparent!important; color:#fff!important; font-weight:800!important; }
.fr-getapp-chip svg{ display:none; }

/* 🖥 데스크톱(≥1100px) — 하단 내비가 없어 오브를 화면 코너로(모바일은 내비 위 74px 유지). */
@media(min-width:1100px){
  #frOrb{ right:26px; bottom:26px; width:62px; height:62px; z-index:960; }
  #frMini{ right:26px; bottom:26px; z-index:960; }
}
/* 회전 틱 링(자비스 다이얼) + 카운터 링 + 앰버 코어 */
.fr-ring{ position:absolute; border-radius:50%; pointer-events:none; }
.fr-r1{
  inset:3px;
  background:repeating-conic-gradient(rgba(95,216,255,.95) 0deg 5deg, transparent 5deg 13deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  animation:frSpin 9s linear infinite; opacity:.9;
}
.fr-r2{
  inset:10px; border:1px solid rgba(95,216,255,.55);
  background:repeating-conic-gradient(rgba(142,233,255,.8) 0deg 2deg, transparent 2deg 26deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation:frSpinR 14s linear infinite; opacity:.8;
}
.fr-core{
  position:absolute; inset:17px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, #fff 0%, #ffe3b8 22%, var(--fr-am) 52%, rgba(255,140,60,0) 78%);
  filter:drop-shadow(0 0 8px rgba(255,180,92,.85));
  animation:frCore 2.6s ease-in-out infinite;
}
@keyframes frSpin{ to{ transform:rotate(360deg); } }
@keyframes frSpinR{ to{ transform:rotate(-360deg); } }
@keyframes frCore{ 0%,100%{ opacity:.85; transform:scale(1); } 50%{ opacity:1; transform:scale(1.1); } }
/* 부르는 점(안읽음) */
#frOrb .fr-dot{ position:absolute; top:2px; right:2px; width:12px; height:12px; border-radius:50%;
  background:var(--fr-am); border:2px solid #04070d; display:none; }
#frOrb.fr-ping .fr-dot{ display:block; }

/* ── 시트/패널(레이아웃·키보드 = 검증된 규칙 그대로) ───── */
/* 🎞 display:none↔block 은 슬라이드가 안 된다(첫 프레임이 없어 뚝 나타나고 뚝 사라졌다, 26.9.22 사장님 「부드럽지가 않아」)
   → 숨김은 visibility 로. 닫을 땐 패널이 다 내려간 뒤(.32s)에 숨는다. */
#frSheet{ position:fixed; inset:0; z-index:950; display:block; visibility:hidden; pointer-events:none; transition:visibility 0s linear .32s; }
#frSheet.fr-open{ visibility:visible; pointer-events:auto; transition:none; }
/* 아일랜드(콘텐츠 위)에서 크게 열면 콘텐츠 상세 시트(z 10000) 위로 — 뒤에 깔려 「맛집 화면이 뜬다」로 보였다(26.9.22 사장님 실기기) */
#frSheet.fr-open.fr-over{ z-index:10055; }
#frSheet .fr-scrim{ position:absolute; inset:0; backdrop-filter:blur(2px); opacity:0; transition:opacity .22s;
  background:linear-gradient(to bottom, rgba(2,6,12,.30) 0, rgba(2,6,12,.62) 84px); }  /* 로고는 보이게 */
#frSheet.fr-open .fr-scrim{ opacity:1; }
:root{ --fr-top: calc(env(safe-area-inset-top,0px) + 84px); --fr-vvh: 100dvh; }
/* 🔑 키보드 트래킹 = DM 검증 로직(높이=--fr-vvh, JS가 willShow에서 즉시 확정). bottom:0 앵커는
   네이티브 resize와 타이밍이 어긋나 스냅(에뮬 프레임분석으로 확인) — 다시 시도하지 말 것. */
#frSheet .fr-panel{
  position:absolute; left:0; right:0; top:calc(var(--fr-top) + var(--fr-off, 0px)); bottom:auto;
  height:calc(var(--fr-vvh) - var(--fr-top));
  color:var(--fr-txt); border-radius:18px 18px 0 0;
  display:flex; flex-direction:column;
  background:
    repeating-linear-gradient(0deg,  rgba(95,216,255,.030) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(95,216,255,.030) 0 1px, transparent 1px 24px),
    linear-gradient(180deg, rgba(9,15,25,.97) 0%, rgba(4,7,13,.985) 100%);
  border-top:1px solid rgba(95,216,255,.4);
  box-shadow:0 -6px 34px rgba(95,216,255,.14);
  transform:translateY(102%);
  transition:transform .3s cubic-bezier(.2,.85,.2,1);   /* 열기/닫기 슬라이드 */
  padding-bottom:env(safe-area-inset-bottom,0px); overflow:hidden;
}
/* 키보드 애니 동안만 높이 트랜지션 ON → 입력창이 키보드와 같은 곡선으로 글라이드(카톡식) */
body.fr-kb-anim #frSheet .fr-panel{
  transition:transform .3s cubic-bezier(.2,.85,.2,1), height .25s cubic-bezier(.38,.7,.125,1);
}
#frSheet.fr-open .fr-panel{ transform:translateY(0); }

/* ── 🛠 작업 모드(도킹 미니챗) ── 편집기 위에 하단 반쪽 시트로 붙어 같이 창작.
   키보드 로직(top 앵커 + --fr-vvh) 그대로: fr-dock은 top을 하단쪽으로 밀 뿐. */
/* ⌨️ 키보드 인지 높이 — 46vh(고정 vh)는 키보드가 떠도 안 줄어 최신 글이 키보드 밑으로 깔렸음(사장님 실기기 지적).
   vvh(비주얼 뷰포트) 비례로: 키보드 뜨면 도킹도 축소 → 마지막 메시지·입력창이 항상 보인다. */
#frSheet.fr-dock{ --fr-dock-h: min(calc(var(--fr-vvh, 100vh) * 0.46), 440px); }
#frSheet.fr-dock .fr-scrim{ background:transparent; backdrop-filter:none; pointer-events:none; }  /* 편집기 클릭 통과 */
#frSheet.fr-dock .fr-panel{
  top: max(calc(var(--fr-top) + var(--fr-off, 0px)), calc(var(--fr-vvh) + var(--fr-off, 0px) - var(--fr-dock-h)));   /* 하단 dock-h만 차지 · 키보드 뜨면 clamp · 웹 오프셋 보정 */
  /* 🔑 높이도 dock-h로! — top만 밀고 height를 풀시트(vvh-top)로 두면 패널이 화면 아래로 뚫고 나가
     입력창·최신 글이 화면 밖("미니 모드 글이 밑으로 감" 실기 사고의 근본 원인). top이 clamp되면 남은 공간만. */
  height: min(var(--fr-dock-h), calc(var(--fr-vvh) - var(--fr-top)));
  box-shadow:0 -8px 40px rgba(0,0,0,.5), 0 -2px 0 rgba(95,216,255,.55);
}
/* 접힘(바) — 헤더만 남기고 로그·입력 숨김 → 편집기 최대 노출 */
#frSheet.fr-dock.fr-dock-min{ --fr-dock-h: 54px; }
#frSheet.fr-dock.fr-dock-min .fr-log,
#frSheet.fr-dock.fr-dock-min .fr-input,
#frSheet.fr-dock.fr-dock-min .fr-hud-line{ display:none; }
#frSheet.fr-dock.fr-dock-min .fr-head{ border-bottom:none; cursor:pointer; }
/* 접기 버튼 — dock에서만 노출, 접히면 화살표 반전 */
.fr-dockmin{ display:none; background:none; border:none; color:var(--fr-dim); padding:4px 4px; cursor:pointer; flex:0 0 auto; -webkit-tap-highlight-color:transparent; }
.fr-dockmin svg{ width:20px; height:20px; display:block; transition:transform .22s; }
#frSheet.fr-dock .fr-dockmin{ display:block; }
#frSheet.fr-dock.fr-dock-min .fr-dockmin svg{ transform:rotate(180deg); }
/* 폼 반영 플래시 — 갈비스가 폼을 고쳤을 때 상단 라인 반짝 */
#frSheet.fr-flash .fr-panel{ animation:frFlash .6s ease-out 1; }
@keyframes frFlash{ 0%,100%{ box-shadow:0 -8px 40px rgba(0,0,0,.5), 0 -2px 0 rgba(95,216,255,.55); }
  32%{ box-shadow:0 -8px 46px rgba(95,216,255,.55), 0 -2px 0 rgba(95,216,255,1); } }
/* 도킹 중엔 미니 필 숨김(중복 방지) */
body.fr-docked #frMini{ display:none !important; }
/* 🛠 도킹 공간 예약 — 미니챗(46vh)이 편집기 하단(본문·발행버튼)을 가리던 것 수정: 페이지가 그만큼 아래 여백을 갖고
   스크롤하면 모든 폼이 도킹 위로 올라온다. 접힘(fr-docked-min)이면 바 높이만. */
body.fr-docked{ padding-bottom: calc(min(46vh, 440px) + 24px) !important; }
body.fr-docked.fr-docked-min{ padding-bottom: 78px !important; }
/* SPA(view-host 스크롤 컨테이너)도 동일 예약 */
body.fr-docked .view-host{ padding-bottom: calc(min(46vh, 440px) + 24px) !important; }
body.fr-docked.fr-docked-min .view-host{ padding-bottom: 78px !important; }
/* ✅ 올리기(발행) 버튼 — dock 작업모드에서만. 대화→다듬기→발행을 한 곳에서 */
.fr-publish{ display:none; margin-left:auto; background:linear-gradient(135deg,#4361ff,#5b8cff); border:none;
  color:#fff; font-size:12px; font-weight:800; padding:6px 11px; border-radius:999px; cursor:pointer;
  font-family:inherit; -webkit-tap-highlight-color:transparent; box-shadow:0 2px 10px rgba(67,97,255,.35); flex:0 0 auto; }
.fr-publish:active{ transform:scale(.95); }
#frSheet.fr-dock.fr-hasform .fr-publish{ display:block; }   /* 편집기 폼 있을 때만(에이전트 도킹엔 숨김) */
#frSheet.fr-dock.fr-dock-min .fr-publish{ display:none; }
/* 올리기 버튼이 margin-left:auto를 가져가므로 voice의 auto는 해제(dock일 때) */
#frSheet.fr-dock .fr-voice{ margin-left:6px; }
/* 확대/축소 버튼 — dock에서만 노출 */
.fr-expand{ display:none; background:none; border:none; color:var(--fr-dim); padding:4px 4px; cursor:pointer; flex:0 0 auto; -webkit-tap-highlight-color:transparent; }
.fr-expand svg{ width:17px; height:17px; display:block; }
#frSheet.fr-dock .fr-expand{ display:block; }
#frSheet.fr-dock.fr-dock-min .fr-expand{ display:none; }

/* 📡 대행 진행 라인 — 말풍선 아닌 라이브 상태(스피너+라벨) */
.fr-prog{ align-self:flex-start; display:flex; align-items:center; gap:9px; padding:9px 13px;
  border:1px solid var(--fr-cy-dim); border-radius:4px 14px 14px 14px;
  background:linear-gradient(180deg, rgba(20,31,46,.7), rgba(12,19,30,.7));
  color:#bfeeff; font-size:13.5px; font-weight:600; letter-spacing:.01em; }
.fr-prog-spin{ width:14px; height:14px; flex:none; border-radius:50%;
  border:2px solid rgba(95,216,255,.25); border-top-color:var(--fr-cy); animation:frSpin .7s linear infinite; }
@keyframes frSpin{ to{ transform:rotate(360deg); } }
.fr-prog-t{ animation:frProgPulse 1.4s ease-in-out infinite; }
@keyframes frProgPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.6; } }
/* 🖼 갈비스가 그린 썸네일 미리보기 */
.fr-thumb{ display:block; max-width:180px; width:100%; border-radius:12px; border:1px solid var(--fr-cy-dim);
  box-shadow:0 4px 18px rgba(0,0,0,.4); }

/* 🗂 콘텐츠 기획안 카드 — '무엇을 만들까' 아이디어 */
.fr-plan{ align-self:stretch; display:flex; flex-direction:column; gap:8px; margin-top:2px; }
.fr-plan-card{ position:relative; background:linear-gradient(180deg,rgba(95,216,255,.06),rgba(95,216,255,.02));
  border:1px solid rgba(95,216,255,.22); border-radius:14px; padding:11px 12px 12px; }
.fr-plan-type{ display:inline-block; font-size:10.5px; font-weight:800; color:#5fd8ff;
  background:rgba(95,216,255,.12); border-radius:999px; padding:2px 8px; margin-bottom:6px; }
.fr-plan-title{ font-size:14px; font-weight:800; color:#eaf7ff; line-height:1.35; }
.fr-plan-angle{ font-size:12px; color:#9fb4c2; line-height:1.45; margin-top:3px; }
.fr-plan-make{ margin-top:10px; width:100%; background:linear-gradient(135deg,#4361ff,#5b8cff); border:none;
  color:#fff; font-size:13px; font-weight:800; padding:9px; border-radius:10px; cursor:pointer; font-family:inherit;
  -webkit-tap-highlight-color:transparent; transition:transform .12s; }
.fr-plan-make:active{ transform:scale(.98); }

/* 📜 대본 블록 */
.fr-script{ align-self:stretch; background:rgba(255,255,255,.04); border:1px solid rgba(95,216,255,.2); border-radius:14px; padding:12px 13px; }
.fr-script-h{ font-size:12px; font-weight:800; color:#bfeeff; margin-bottom:7px; }
.fr-script-body{ font-size:13px; line-height:1.6; color:#e6f3fc; white-space:pre-wrap; max-height:340px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.fr-script-copy{ margin-top:10px; background:rgba(95,216,255,.12); border:1px solid rgba(95,216,255,.4); color:#bfeeff;
  font-size:12.5px; font-weight:800; padding:7px 14px; border-radius:999px; cursor:pointer; font-family:inherit; }

/* 🎞 릴스 대본 카드 — 녹음→자동편집 파이프라인 */
.fr-reel .fr-script-body{ max-height:250px; }
.fr-reel-ctl{ display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap; }
.fr-reel-rec,.fr-reel-redo,.fr-reel-make,.fr-reel-ai{ background:rgba(95,216,255,.12); border:1px solid rgba(95,216,255,.4); color:#bfeeff;
  font-size:12.5px; font-weight:800; padding:8px 14px; border-radius:999px; cursor:pointer; font-family:inherit; }
.fr-reel-make{ background:rgba(255,180,92,.14); border-color:rgba(255,180,92,.5); color:#ffd9a8; }
.fr-reel-make:disabled{ opacity:.5; }
.fr-reel-time{ font-size:12px; color:#9fd8ef; font-variant-numeric:tabular-nums; }
.fr-reel-audio{ width:100%; margin-top:10px; height:36px; }
.fr-reel-status{ font-size:12px; color:#ffd9a8; margin-top:8px; min-height:15px; }

/* 🔥 어그로 제목 후보 카드 */
.fr-titles{ align-self:stretch; display:flex; flex-direction:column; gap:6px; margin-top:2px; }
.fr-titles-h{ font-size:11.5px; font-weight:800; color:#ffb45c; padding:2px 2px 3px; }
.fr-title-card{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; width:100%;
  background:rgba(255,180,92,.07); border:1px solid rgba(255,180,92,.28); border-radius:12px; padding:10px 12px;
  cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .1s, background .14s; }
.fr-title-card:active{ transform:scale(.99); }
.fr-title-card:hover{ background:rgba(255,180,92,.13); }
.fr-title-t{ font-size:14px; font-weight:800; color:#ffe9cf; line-height:1.35; }
.fr-title-s{ font-size:10.5px; font-weight:700; color:#b98a52; }

/* 📎 근거 창구 — 칩 + 입력 패널 + 클립 버튼 */
.fr-clip{ background:none; border:none; color:var(--fr-dim); padding:6px; cursor:pointer; flex:0 0 auto; -webkit-tap-highlight-color:transparent; }
.fr-clip svg{ width:20px; height:20px; display:block; }
.fr-clip:active{ color:var(--fr-cy); }
.fr-srcchips{ display:none; flex-wrap:wrap; gap:6px; padding:8px 14px 0; }
.fr-srcchip{ display:inline-flex; align-items:center; gap:5px; max-width:180px;
  background:rgba(95,216,255,.1); border:1px solid rgba(95,216,255,.35); border-radius:999px; padding:4px 6px 4px 9px;
  font-size:11.5px; color:#bfeeff; }
.fr-srcchip.pend{ opacity:.6; animation:frProgPulse 1.2s ease-in-out infinite; }
.fr-srcchip b{ font-size:12px; }
.fr-srcchip i{ font-style:normal; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:120px; }
.fr-srcchip button{ background:none; border:none; color:#8fb6c6; font-size:15px; line-height:1; padding:0 2px; cursor:pointer; }
.fr-srcadd{ display:flex; align-items:center; gap:7px; padding:8px 14px 2px; }
.fr-srcadd[hidden]{ display:none; }   /* 🐛 hidden 속성이 display:flex에 안 먹던 것 — 📎 탭 전엔 숨김 */
.fr-srcadd .fr-src-inp{ flex:1; min-width:0; background:rgba(255,255,255,.05); border:1px solid rgba(95,216,255,.3);
  border-radius:10px; padding:8px 11px; color:#eaf7ff; font-size:13px; font-family:inherit; -webkit-appearance:none; }
.fr-srcadd .fr-src-inp::placeholder{ color:#5f8496; }
.fr-srcadd .fr-src-img{ background:rgba(255,255,255,.06); border:1px solid rgba(95,216,255,.3); border-radius:10px;
  padding:7px 9px; font-size:15px; cursor:pointer; flex:0 0 auto; }
.fr-srcadd .fr-src-ok{ background:linear-gradient(135deg,#4361ff,#5b8cff); border:none; color:#fff; font-weight:800;
  font-size:12.5px; padding:8px 13px; border-radius:10px; cursor:pointer; font-family:inherit; flex:0 0 auto; }
/* HUD 코너 브래킷 */
#frSheet .fr-panel::before, #frSheet .fr-panel::after{
  content:""; position:absolute; top:8px; width:16px; height:16px; pointer-events:none; opacity:.75;
}
#frSheet .fr-panel::before{ left:8px;  border-top:2px solid var(--fr-cy); border-left:2px solid var(--fr-cy);  border-radius:6px 0 0 0; }
#frSheet .fr-panel::after { right:8px; border-top:2px solid var(--fr-cy); border-right:2px solid var(--fr-cy); border-radius:0 6px 0 0; }
/* 상단 스캔 라인(은은하게 좌↔우) */
.fr-hud-line{ position:absolute; top:0; left:-40%; width:40%; height:2px; pointer-events:none; opacity:.5;
  background:linear-gradient(90deg, transparent, var(--fr-cy), transparent);
  animation:frScan 4.2s ease-in-out infinite; }
@keyframes frScan{ 0%{ left:-40%; } 55%{ left:100%; } 100%{ left:100%; } }
/* 🫥 대화 중 하단 내비 숨김 + 당겨새로고침은 pull-refresh.js 가드(fr-chatting)로 차단 */
body.fr-chatting nav.nav{ display:none !important; }
/* 🚫 오브·미니보드를 숨겨야 하는 몰입/상세 화면 — DM채팅방·난장방(dm-detail), 핫튜브 플레이어(hv-playing).
   (숏판·릴스는 자체 오버레이가 오브 위를 덮음). 겹침·오작동 방지. */
body.dm-detail #frOrb, body.dm-detail #frMini,
body.hv-playing #frOrb, body.hv-playing #frMini{ display:none !important; }

/* ── 헤더 ─────────────────────────────────────────── */
.fr-head{ display:flex; align-items:center; gap:11px; padding:13px 14px 11px; border-bottom:1px solid rgba(95,216,255,.15); }
.fr-head .fr-av{ position:relative; width:38px; height:38px; border-radius:50%; flex:0 0 auto;
  background:radial-gradient(circle at 50% 45%, rgba(18,32,48,.96), rgba(6,10,18,.98) 72%);
  box-shadow:0 0 10px rgba(95,216,255,.4), inset 0 0 8px rgba(95,216,255,.25); }
.fr-head .fr-av .fr-r1{ inset:2px; animation-duration:11s; }
.fr-head .fr-av .fr-r2{ inset:7px; animation-duration:16s; }
.fr-head .fr-av .fr-core{ inset:12px; }
.fr-idwrap{ min-width:0; }
.fr-head .fr-name{ font-weight:800; font-size:15px; letter-spacing:.14em; color:#dff4ff;
  text-shadow:0 0 10px rgba(95,216,255,.55); white-space:nowrap; }
#frSheet.fr-open .fr-name{ animation:frBoot .9s ease-out 1; }
@keyframes frBoot{ 0%{ opacity:0; } 35%{ opacity:1; } 50%{ opacity:.35; } 65%{ opacity:1; } 78%{ opacity:.6; } 100%{ opacity:1; } }
.fr-head .fr-sub{ font-size:8px; letter-spacing:.06em; text-transform:uppercase; color:var(--fr-dim); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* 🔊 음성 답변 토글 — 꺼짐=흐림, 켜짐=시안 글로우+웨이브 표시 */
.fr-voice{ margin-left:auto; background:none; border:none; padding:5px 6px; cursor:pointer; color:var(--fr-dim); flex:0 0 auto; -webkit-tap-highlight-color:transparent; }
.fr-voice svg{ width:19px; height:19px; display:block; }
.fr-voice .fr-vw1, .fr-voice .fr-vw2{ opacity:.25; }
.fr-voice.on{ color:var(--fr-cy); filter:drop-shadow(0 0 6px rgba(95,216,255,.6)); }
.fr-voice.on .fr-vw1, .fr-voice.on .fr-vw2{ opacity:1; }
.fr-status{ display:inline-flex; align-items:center; gap:5px; flex:0 0 auto;
  font-size:9px; font-weight:700; letter-spacing:.14em; color:var(--fr-am); }
.fr-status i{ width:6px; height:6px; border-radius:50%; background:var(--fr-am);
  box-shadow:0 0 8px rgba(255,180,92,.9); animation:frStat 1.8s ease-in-out infinite; }
@keyframes frStat{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.fr-head .fr-x{ background:none; border:none; color:var(--fr-dim); font-size:22px; line-height:1; padding:4px 6px 4px 10px; cursor:pointer; flex:0 0 auto; }

/* ── 로그/말풍선 ───────────────────────────────────── */
.fr-log{ flex:1; overflow-y:auto; padding:16px 14px; display:flex; flex-direction:column; gap:10px;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
#frSheet .fr-panel{ overscroll-behavior:contain; }
.fr-msg{ max-width:86%; font-size:14.5px; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.fr-msg.fr-a{ align-self:flex-start; }
.fr-msg.fr-a .fr-bubble{ position:relative;
  background:linear-gradient(180deg, rgba(20,31,46,.88), rgba(12,19,30,.88));
  border:1px solid var(--fr-cy-dim); border-radius:4px 14px 14px 14px;
  padding:10px 13px; color:#e6f3fc;
  box-shadow:0 2px 14px rgba(0,0,0,.35), inset 0 0 18px rgba(95,216,255,.04); }
.fr-msg.fr-a .fr-bubble::before{ content:""; position:absolute; top:-1px; left:-1px; width:9px; height:9px;
  border-top:2px solid var(--fr-cy); border-left:2px solid var(--fr-cy); border-radius:3px 0 0 0; opacity:.85; }
/* 🎬 지문(((행동))) — 지문체 */
.fr-stage{ color:var(--fr-am); opacity:.82; font-style:italic; font-size:13.5px; }
/* 😎 갈라 짤(이미지 이모티콘) — 인라인 중간 크기 */
.fr-emo{ display:inline-block; width:74px; height:74px; object-fit:contain; vertical-align:middle; margin:2px 0; }
/* 🐎 이모지 스티커([stk:]) — 큰 애니 스티커, 한 줄 단독일 때 특히 크게 */
.fr-stk{ display:block; width:80px; height:80px; object-fit:contain; margin:5px 0 1px; }   /* 🐛 문장 중간에 끼면 흐름 깨짐 → 항상 자기 줄로 */
.fr-msg.fr-a .fr-bubble:has(> .fr-stk:only-child){ background:transparent; border:none; box-shadow:none; padding:2px; }
.fr-msg.fr-a .fr-bubble:has(> .fr-stk:only-child)::before{ display:none; }
/* 유저 = 갈라 진영 그라데(레드→블루, 포스터 톤) */
.fr-msg.fr-u{ align-self:flex-end; color:#fff; padding:9px 13px; border-radius:14px 4px 14px 14px;
  background:linear-gradient(135deg, #e04a58 0%, #8a55e8 52%, #3f8cff 100%);
  box-shadow:0 2px 14px rgba(63,140,255,.25); }

/* 액션 칩(보러가기/공유) — 홀로 아웃라인 */
.fr-acts{ display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; }
.fr-chip{ display:inline-flex; align-items:center; gap:6px;
  background:rgba(95,216,255,.08); border:1px solid rgba(95,216,255,.45);
  color:#9fe3ff; font-size:12.5px; font-weight:600; padding:7px 12px; border-radius:999px;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  box-shadow:0 0 10px rgba(95,216,255,.10); }
.fr-chip:active{ transform:scale(.95); box-shadow:0 0 14px rgba(95,216,255,.35); }
.fr-chip svg{ width:14px; height:14px; }
.fr-chip.fr-danger{ background:rgba(226,59,59,.14); border-color:rgba(226,59,59,.6); color:#ff9b9b; box-shadow:0 0 10px rgba(226,59,59,.15); }
.fr-chip.fr-danger:disabled{ opacity:.5; }

/* 🔗 리치 링크 카드 — 검색결과·콘텐츠를 세련된 프리뷰로 */
.fr-card{ display:flex; align-items:center; gap:11px; width:100%; max-width:300px; text-align:left;
  background:linear-gradient(180deg,rgba(95,216,255,.07),rgba(95,216,255,.03));
  border:1px solid rgba(95,216,255,.24); border-radius:15px; padding:11px 12px;
  cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .12s, border-color .14s, background .14s; }
.fr-card:active{ transform:scale(.98); }
.fr-card:hover{ border-color:rgba(95,216,255,.5); background:linear-gradient(180deg,rgba(95,216,255,.11),rgba(95,216,255,.05)); }
.fr-card-ic{ flex:none; width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:rgba(95,216,255,.12); color:#5fd8ff; }
.fr-card-ic svg{ width:19px; height:19px; }
/* 🔢 추천 여러 개 = 번호 배지 — "2번"이라고 치면 그 카드가 바로 열린다 */
.fr-card-n{ font-size:17px; font-weight:800; font-style:normal; color:var(--fr-accent, #7c8cff); }
.fr-card-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.fr-card-t{ font-size:13.5px; font-weight:800; color:#eaf7ff; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fr-card-s{ font-size:11.5px; color:#9fb4c2; line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fr-card-src{ font-size:10px; font-weight:700; letter-spacing:.02em; color:#5f8496; text-transform:none; margin-top:1px; }
.fr-card-go{ flex:none; color:#5fd8ff; opacity:.7; }
.fr-card-go svg{ width:17px; height:17px; }

/* 🆘 위기 상담 카드 — 자극 없는 차분한 톤(경보색 아님, 따뜻한 보살핌). 탭=바로 전화. */
.fr-crisis{ width:100%; max-width:320px; display:flex; flex-direction:column; gap:7px;
  background:linear-gradient(180deg,rgba(140,160,210,.10),rgba(140,160,210,.04));
  border:1px solid rgba(150,170,220,.28); border-radius:16px; padding:12px 12px 11px; margin-top:3px; }
.fr-crisis-t{ font-size:12.5px; font-weight:700; color:#dfe6f5; line-height:1.4; padding:1px 2px 3px; }
.fr-crisis-call{ display:flex; align-items:center; gap:10px; text-decoration:none;
  background:rgba(150,170,220,.10); border:1px solid rgba(150,170,220,.22); border-radius:12px; padding:9px 11px;
  -webkit-tap-highlight-color:transparent; transition:background .14s, border-color .14s, transform .12s; }
.fr-crisis-call:active{ transform:scale(.985); }
.fr-crisis-call:hover{ background:rgba(150,170,220,.16); border-color:rgba(150,170,220,.4); }
.fr-crisis-ph{ flex:none; width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  background:rgba(150,170,220,.16); color:#aebbe0; }
.fr-crisis-ph svg{ width:16px; height:16px; }
.fr-crisis-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.fr-crisis-body b{ font-size:13px; font-weight:700; color:#eef2fb; }
.fr-crisis-body i{ font-style:normal; font-size:10.5px; color:#94a0bd; }
.fr-crisis-num{ flex:none; font-size:14px; font-weight:800; color:#c7d2ee; letter-spacing:.02em; }

/* 타이핑 = HUD 웨이브폼 */
.fr-typing{ align-self:flex-start; display:flex; align-items:center; gap:4px; padding:12px 14px;
  background:linear-gradient(180deg, rgba(20,31,46,.88), rgba(12,19,30,.88));
  border:1px solid var(--fr-cy-dim); border-radius:4px 14px 14px 14px; }
.fr-typing i{ width:3px; height:13px; border-radius:2px; background:var(--fr-cy);
  box-shadow:0 0 6px rgba(95,216,255,.7); animation:frWave 1.05s ease-in-out infinite; transform-origin:center; }
.fr-typing i:nth-child(2){ animation-delay:.18s } .fr-typing i:nth-child(3){ animation-delay:.36s }
@keyframes frWave{ 0%,100%{ transform:scaleY(.35); opacity:.5; } 50%{ transform:scaleY(1); opacity:1; } }

/* ── 입력부 ───────────────────────────────────────── */
.fr-input{ display:flex; align-items:flex-end; gap:8px; padding:10px 12px 12px; border-top:1px solid rgba(95,216,255,.15); }
.fr-input textarea{ flex:1; resize:none; max-height:120px; min-height:22px;
  background:rgba(13,22,34,.92); border:1px solid var(--fr-cy-dim);
  border-radius:16px; color:var(--fr-txt); caret-color:var(--fr-cy);
  font-size:16px; line-height:1.4; padding:10px 14px; outline:none; font-family:inherit;
  transition:border-color .18s, box-shadow .18s; }
.fr-input textarea:focus{ border-color:rgba(95,216,255,.6); box-shadow:0 0 0 2px rgba(95,216,255,.12), 0 0 14px rgba(95,216,255,.12); }
.fr-input textarea::placeholder{ color:var(--fr-dim); }
.fr-mic{ width:40px; height:40px; flex:0 0 auto; border-radius:50%;
  background:rgba(13,22,34,.92); border:1px solid var(--fr-cy-dim); color:var(--fr-dim);
  cursor:pointer; display:grid; place-items:center; }
.fr-mic svg{ width:19px; height:19px; }
.fr-mic.fr-rec{ background:#e23b3b; color:#fff; border-color:#e23b3b; animation:frRec 1s ease-in-out infinite; }
@keyframes frRec{ 0%,100%{ box-shadow:0 0 0 0 rgba(226,59,59,.5); } 50%{ box-shadow:0 0 0 8px rgba(226,59,59,0); } }
.fr-send{ width:40px; height:40px; flex:0 0 auto; border:none; border-radius:50%; color:#03121f;
  background:radial-gradient(120% 120% at 30% 25%, #c9f2ff 0%, #5fd8ff 55%, #1f8fdc 100%);
  cursor:pointer; display:grid; place-items:center;
  box-shadow:0 0 14px rgba(95,216,255,.5); }
.fr-send:disabled{ opacity:.4; box-shadow:none; }
.fr-send svg{ width:18px; height:18px; }

/* ── 🔽 미니 보드 — 콘텐츠 보는 동안 갈비스가 접혀 대기(탭하면 대화 복귀) ── */
#frMini{
  position:fixed; right:12px; z-index:945;
  bottom:calc(env(safe-area-inset-bottom,0px) + 78px);
  display:none; align-items:center; gap:8px;
  height:42px; padding:0 13px 0 6px; border:1px solid rgba(95,216,255,.45); border-radius:999px;
  background:linear-gradient(180deg, rgba(14,23,36,.96), rgba(7,12,20,.97));
  color:#cfeeff; font-size:13px; font-weight:700; letter-spacing:.05em; cursor:pointer;
  box-shadow:0 0 16px rgba(95,216,255,.35), 0 4px 18px rgba(0,0,0,.5);
  -webkit-tap-highlight-color:transparent;
  transform-origin:100% 100%;
}
#frMini.on{ display:inline-flex; }
#frMini.pop{ animation:frMiniPop .55s cubic-bezier(.34,1.56,.64,1) both; }  /* 스프링 팝인 */
@keyframes frMiniPop{
  0%{ transform:translateY(26px) scale(.3); opacity:0; }
  60%{ transform:translateY(-4px) scale(1.06); opacity:1; }
  100%{ transform:translateY(0) scale(1); opacity:1; }
}
#frMini:active{ transform:scale(.94); }
#frMini .fr-mav{ position:relative; width:30px; height:30px; border-radius:50%; flex:0 0 auto; display:block;
  background:radial-gradient(circle at 50% 45%, rgba(18,32,48,.96), rgba(6,10,18,.98) 72%);
  box-shadow:inset 0 0 6px rgba(95,216,255,.3); }
#frMini .fr-mav .fr-r1{ inset:1px; animation-duration:10s; }
#frMini .fr-mav .fr-core{ inset:9px; }
#frMini svg{ width:15px; height:15px; color:#7f97a8; }
#frMini .fr-mini-txt{ text-shadow:0 0 8px rgba(95,216,255,.5); }
/* 대기 중 은은한 링 펄스 — "나 여기 있어" */
#frMini::after{ content:""; position:absolute; inset:-3px; border-radius:999px;
  border:1px solid rgba(95,216,255,.4); opacity:0; animation:frMiniPing 2.6s ease-out .6s infinite; pointer-events:none; }
@keyframes frMiniPing{ 0%{ transform:scale(.97); opacity:.6; } 70%{ opacity:0; } 100%{ transform:scale(1.12); opacity:0; } }

/* 이름 짓기 배너 — 앰버 헤어라인 */
.fr-name-ask{ margin:0 16px 8px; padding:10px 12px; background:rgba(13,22,34,.92);
  border:1px solid rgba(255,180,92,.4); border-radius:12px; font-size:13px; color:var(--fr-dim); }
.fr-name-ask input{ margin-top:6px; width:100%; background:var(--fr-bg); border:1px solid var(--fr-cy-dim);
  border-radius:8px; color:var(--fr-txt); font-size:15px; padding:8px 10px; outline:none; }

/* 🎟 가입 유도 CTA — 맛보기 소진 시 딱 하나만 뜬다. 일반 칩과 구분되게 채워진 버튼. */
.fr-chip-cta{
  background:linear-gradient(135deg,#5b7cfa,#7a5bfa);
  border-color:transparent; color:#fff; font-weight:800;
  box-shadow:0 4px 14px rgba(91,124,250,.32);
}
.fr-chip-cta:active{ transform:translateY(1px); }

/* 👀 릴스 컷 미리보기 — AI 배치를 사람이 2탭으로 고친다(마지막 10%를 사람이 채우는 자리) */
.fr-cutpv{ align-self:stretch; background:rgba(255,255,255,.04); border:1px solid rgba(95,216,255,.2); border-radius:14px; padding:12px; }
.fr-cutpv-h{ font-size:12px; font-weight:800; color:#bfeeff; margin-bottom:9px; }
.fr-cutpv-list{ display:flex; flex-direction:column; gap:6px; max-height:46vh; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.fr-cut{ display:flex; align-items:center; gap:9px; background:rgba(0,0,0,.25); border-radius:10px; padding:6px 8px; }
.fr-cut-th{ width:38px; height:58px; object-fit:cover; border-radius:6px; background:#111; flex:0 0 auto; }
.fr-cut-mid{ flex:1 1 auto; min-width:0; }
.fr-cut-txt{ font-size:12.5px; color:#e6f3fc; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fr-cut-cap{ font-size:11px; color:#8fb6c9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.fr-cut-swap{ flex:0 0 auto; background:rgba(95,216,255,.12); border:1px solid rgba(95,216,255,.35); color:#bfeeff;
  font-size:11.5px; font-weight:800; padding:6px 10px; border-radius:999px; cursor:pointer; font-family:inherit; }
/* ▶ 렌더 전 미리보기 — 원본 클립을 이어 재생하며 음성·자막을 얹는다(서버 비용 0) */
.fr-pv{ margin-bottom:10px; }
.fr-pv-stage{ position:relative; width:100%; max-width:190px; margin:0 auto; aspect-ratio:9/16;
  background:#000; border-radius:10px; overflow:hidden; }
.fr-pv-v{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; }
.fr-pv-sub{ position:absolute; left:0; right:0; top:49%; transform:translateY(-50%); text-align:center; padding:0 6px; }
.fr-pv-sub span{ display:inline-block; background:rgba(0,0,0,.7); color:#fff; font-size:12px; font-weight:800;
  line-height:1.3; padding:2px 6px; border-radius:3px; }
.fr-pv-sub span:empty{ display:none; }
.fr-pv-btn{ display:block; margin:8px auto 0; background:rgba(95,216,255,.12); border:1px solid rgba(95,216,255,.35);
  color:#bfeeff; border-radius:8px; padding:6px 14px; font-size:12px; font-family:inherit; cursor:pointer; }

/* 🅰🅱 문장 단위 확인 카드 — 지금 화면(A)과 차점 후보(B)를 나란히, 1탭으로 교체 */
.fr-cut2{ background:rgba(0,0,0,.25); border-radius:10px; padding:8px; }
.fr-cut2.unsure{ border:1px solid rgba(255,180,92,.45); }
.fr-cut2-txt{ font-size:12.5px; color:#e6f3fc; line-height:1.35; margin-bottom:6px; }
.fr-cut2-opts{ display:flex; gap:8px; }
.fr-opt{ flex:1 1 0; min-width:0; position:relative; background:none; border:1px solid rgba(255,255,255,.14);
  border-radius:9px; padding:4px; cursor:pointer; font-family:inherit; }
.fr-opt.on{ border-color:rgba(95,216,255,.75); background:rgba(95,216,255,.10); cursor:default; }
.fr-cut2-opts .fr-opt:only-child{ max-width:50%; }   /* 후보가 없으면(확실한 컷) 혼자 화면을 다 먹지 않게 */
.fr-opt img{ width:100%; height:88px; object-fit:cover; border-radius:6px; background:#111; display:block; }
.fr-opt-tag{ position:absolute; top:7px; left:7px; z-index:1; font-size:10px; font-weight:800; color:#0b1218;
  background:#bfeeff; border-radius:5px; padding:1px 5px; }
.fr-opt-cap{ display:block; font-size:10px; color:#cfe6f2; margin-top:4px; line-height:1.25; max-height:26px; overflow:hidden; }
.fr-cut2-more{ width:100%; margin-top:6px; background:none; border:none; color:#8fb6c9; font-size:11px;
  font-family:inherit; cursor:pointer; padding:3px; }
.fr-pick{ display:flex; gap:6px; overflow-x:auto; padding:6px 2px; -webkit-overflow-scrolling:touch; }
.fr-pick-it{ flex:0 0 auto; width:64px; background:none; border:1px solid rgba(255,255,255,.14); border-radius:8px; padding:4px; cursor:pointer; font-family:inherit; }
.fr-pick-it img{ width:100%; height:76px; object-fit:cover; border-radius:5px; background:#111; display:block; }
.fr-pick-it span{ display:block; font-size:9.5px; color:#cfe6f2; margin-top:3px; line-height:1.2; max-height:24px; overflow:hidden; }
.fr-cutpv-go{ width:100%; margin-top:10px; background:rgba(255,180,92,.16); border:1px solid rgba(255,180,92,.5); color:#ffd9a8;
  font-size:13px; font-weight:800; padding:10px; border-radius:10px; cursor:pointer; font-family:inherit; }
.fr-cutpv-go:disabled{ opacity:.5; }

/* ◀▶ 컷 가로 위치 — 가로 원본을 9:16으로 자를 때 무엇을 남길지 사람이 정한다(자동 판정은 폐기) */
.fr-nudge{ display:flex; gap:6px; justify-content:center; margin-top:6px; }
.fr-nudge button{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); color:#cfe6f2;
  border-radius:7px; padding:3px 10px; font-size:11px; font-family:inherit; cursor:pointer; }
.fr-nudge button:active{ background:rgba(95,216,255,.18); }

/* ═══ 자비스 UX (2026-08-21) — 경계선·즉시반응·HUD·런치 ═══ */

/* 📍 새 대화 경계 — 지난 대화는 딤, 시안 스캔 라인이 '지금'을 가른다 */
.fr-msg.fr-old{ opacity:.52; filter:saturate(.75); }
.fr-divider{
  display:flex; align-items:center; gap:10px; margin:14px 2px 10px;
  animation:frDivIn .5s cubic-bezier(.2,.9,.3,1.2);
}
.fr-divider::before,.fr-divider::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, transparent, var(--fr-cy-dim), var(--fr-cy));
}
.fr-divider::after{ background:linear-gradient(90deg, var(--fr-cy), var(--fr-cy-dim), transparent); }
.fr-divider span{
  font-size:10px; font-weight:900; letter-spacing:.12em; color:var(--fr-cy);
  text-shadow:0 0 10px var(--fr-cy-dim); white-space:nowrap;
}
@keyframes frDivIn{ from{ opacity:0; transform:scaleX(.6);} to{ opacity:1; transform:scaleX(1);} }

/* 🛰 HUD 진행 — 지나간 단계가 흔적으로 쌓이고, 현재 단계는 스캔 글로우 */
.fr-prog{ display:flex; flex-direction:column; gap:3px; margin:6px 2px; }
.fr-prog-hist{ display:flex; flex-direction:column; gap:2px; }
.fr-prog-done{
  font-size:10.5px; color:var(--fr-dim); opacity:.55; padding-left:18px;
  position:relative; animation:frStepFade .4s ease;
}
.fr-prog-done::before{ content:"▸"; position:absolute; left:6px; color:var(--fr-cy); opacity:.5; }
.fr-prog-now{
  display:flex; align-items:center; gap:7px;
  font-size:12px; font-weight:700; color:var(--fr-cy);
  padding:5px 10px; border-radius:9px;
  background:linear-gradient(90deg, rgba(95,216,255,.10), rgba(95,216,255,.02));
  border:1px solid rgba(95,216,255,.18);
  position:relative; overflow:hidden;
}
.fr-prog-now::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 30%, rgba(95,216,255,.16) 50%, transparent 70%);
  transform:translateX(-100%); animation:frScan 1.4s linear infinite;
}
.fr-prog-now.fr-prog-in{ animation:frStepIn .3s cubic-bezier(.2,.9,.3,1.3); }
.fr-prog-t{ color:var(--fr-txt); text-shadow:0 0 8px var(--fr-cy-dim); }
@keyframes frScan{ to{ transform:translateX(100%);} }
@keyframes frStepIn{ from{ transform:translateY(4px); opacity:.4;} to{ transform:translateY(0); opacity:1;} }
@keyframes frStepFade{ from{ opacity:0; transform:translateY(-3px);} to{ opacity:.55; transform:translateY(0);} }

/* ✨ 카드·칩 등장 — 스프링 + 글로우 스윕 1회 */
.fr-acts.fr-in > *{
  animation:frCardIn .42s cubic-bezier(.2,.9,.3,1.25) backwards;
}
.fr-acts.fr-in > *:nth-child(2){ animation-delay:.08s; }
.fr-acts.fr-in > *:nth-child(3){ animation-delay:.16s; }
@keyframes frCardIn{
  from{ opacity:0; transform:translateY(8px) scale(.94); box-shadow:0 0 0 rgba(95,216,255,0); }
  60%{ box-shadow:0 0 22px rgba(95,216,255,.35); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

/* 🚀 자동 오픈 런치 — 0.7초 차오르는 스윕 → 확대 발사 */
.fr-card.fr-arming, .fr-chip.fr-arming{
  position:relative; overflow:hidden;
  border-color:var(--fr-cy) !important;
  box-shadow:0 0 18px rgba(95,216,255,.30);
}
.fr-card.fr-arming::after, .fr-chip.fr-arming::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:0;
  background:linear-gradient(90deg, rgba(95,216,255,.14), rgba(95,216,255,.30));
  animation:frArm .7s linear forwards;
}
@keyframes frArm{ to{ width:100%; } }
.fr-card.fr-launch, .fr-chip.fr-launch{
  animation:frLaunch .24s cubic-bezier(.4,0,.9,.4) forwards;
}
@keyframes frLaunch{
  40%{ transform:scale(1.05); box-shadow:0 0 30px rgba(95,216,255,.55); opacity:1; }
  to{ transform:scale(1.14) translateY(-6px); opacity:0; }
}

/* ♿ 모션 최소화 존중 */
@media (prefers-reduced-motion: reduce){
  .fr-divider,.fr-prog-now.fr-prog-in,.fr-acts.fr-in > *,.fr-card.fr-launch,.fr-chip.fr-launch,.fr-prog-done{ animation:none !important; }
  .fr-prog-now::after{ animation:none; }
  .fr-card.fr-arming::after{ animation-duration:.01s; }
}

/* 🔢 넘버링 선택지 — 탭 한 번에 고르기 */
.fr-choices{ display:flex; flex-direction:column; gap:7px; margin:4px 0 2px; max-width:320px; }
.fr-choice{
  display:flex; align-items:center; gap:10px; text-align:left; cursor:pointer;
  padding:10px 12px; border-radius:12px;
  background:rgba(95,216,255,.06); border:1px solid rgba(95,216,255,.22);
  color:var(--fr-txt); font-size:13px; font-weight:600;
  transition:transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.fr-choice:active{ transform:scale(.97); }
.fr-choice:hover{ border-color:var(--fr-cy); box-shadow:0 0 14px rgba(95,216,255,.22); }
.fr-choice-n{
  flex:0 0 auto; width:22px; height:22px; border-radius:7px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:900; color:#04070d;
  background:var(--fr-cy); box-shadow:0 0 10px rgba(95,216,255,.4);
}
.fr-choice-t{ flex:1; line-height:1.35; }
.fr-choice:disabled{ opacity:.4; }
.fr-choice.fr-choice-sel{
  opacity:1 !important; border-color:var(--fr-cy);
  box-shadow:0 0 20px rgba(95,216,255,.45);
  animation:frChoiceGo .3s ease forwards;
}
@keyframes frChoiceGo{ to{ transform:scale(1.03); opacity:0; } }

/* 🎤 비로그인 갈비스 유입 창(26.9.18) — 갈비스가 직접 말을 건다 */
#frGuest{ position:fixed; inset:0; z-index:2147482000; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(4,6,12,.55); opacity:0; transition:opacity .2s; }
#frGuest.on{ opacity:1; }
#frGuest .frg-card{ width:min(100%,460px); margin:0 10px calc(env(safe-area-inset-bottom,0px) + 14px); padding:22px 18px 14px;
  border-radius:24px; background:linear-gradient(160deg,rgba(22,26,38,.98),rgba(12,14,20,.98)); border:1px solid rgba(120,200,255,.18);
  box-shadow:0 24px 60px rgba(0,0,0,.55); text-align:center; transform:translateY(24px); transition:transform .28s cubic-bezier(.2,.85,.3,1); }
#frGuest.on .frg-card{ transform:translateY(0); }
#frGuest .frg-av{ position:relative; width:64px; height:64px; margin:0 auto 12px; }
#frGuest .frg-av .fr-ring, #frGuest .frg-av .fr-core{ position:absolute; }
#frGuest .frg-av .fr-core{ inset:16px; }
#frGuest .frg-bubble b{ display:block; color:#fff; font-size:17px; font-weight:900; line-height:1.35; }
#frGuest .frg-bubble p{ margin:8px 0 16px; color:#aeb6c8; font-size:13.5px; line-height:1.55; }
#frGuest .frg-go{ width:100%; padding:14px; border:0; border-radius:14px; background:var(--accent-grad,#4361ff); color:#fff;
  font-size:15px; font-weight:900; cursor:pointer; }
#frGuest .frg-x{ width:100%; margin-top:6px; padding:10px; border:0; background:none; color:#7d8494; font-size:13px; font-weight:700; cursor:pointer; }

/* 🖼 사진 카드(26.9.22) — 맛집·여행·숏판 카드에 대표 사진, 번호는 사진 위 배지 */
.fr-card-img{ position:relative; width:52px; height:52px; border-radius:12px; overflow:hidden; background:#10151c; padding:0; }
.fr-card-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.fr-card-img .fr-card-n{ position:absolute; left:3px; top:3px; min-width:18px; height:18px; border-radius:9px; font-size:11px; line-height:18px; text-align:center;
  background:rgba(0,0,0,.72); color:#fff; padding:0 4px; }
.fr-card-hasimg{ max-width:320px; }

/* ✅ 채팅 안 행동 확인 카드(26.9.22) */
.fr-confirm{ max-width:300px; padding:12px 13px; border-radius:14px; border:1px solid rgba(124,140,255,.35); background:linear-gradient(180deg,rgba(124,140,255,.12),rgba(124,140,255,.05)); }
.fr-confirm-t{ font-size:13.5px; font-weight:800; color:#eef1ff; line-height:1.35; }
.fr-confirm-s{ font-size:12px; color:#aeb6d6; margin-top:3px; line-height:1.4; }
.fr-confirm-b{ display:flex; gap:8px; margin-top:10px; }
.fr-confirm.fr-done{ opacity:.55; }

/* ══════════ 🃏 콘텐츠 카드 덱(26.9.22) — 사진·배지·번호·갈비스 픽, CSS 애니메이션만(비용 0) ══════════ */
@property --fr-ang { syntax:"<angle>"; initial-value:0deg; inherits:false; }
.fr-deck{ width:100%; margin-top:2px; }
.fr-deck-track{ display:flex; gap:10px; }
.fr-deck-multi .fr-deck-track{ overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 14px 10px 2px; margin:0 -14px 0 -2px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; touch-action:pan-x pan-y; }
.fr-deck-multi .fr-deck-track::-webkit-scrollbar{ display:none; }
.fr-deck-one .fr-deck-track{ padding:6px 2px 8px; }

.fr-tc{ --kc:#7c8cff; position:relative; flex:none; width:212px; scroll-snap-align:start; text-align:left; padding:0; border:0; cursor:pointer;
  border-radius:18px; background:#101218; color:#fff; overflow:hidden; isolation:isolate; -webkit-tap-highlight-color:transparent;
  box-shadow:0 10px 26px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.07);
  opacity:0; transform:translateY(26px) rotate(-3deg) scale(.9);
  animation:frTcDeal .62s cubic-bezier(.2,1.35,.35,1) forwards; animation-delay:calc(var(--i) * 90ms + 60ms);
  transition:transform .16s ease, box-shadow .2s ease; }
.fr-deck-one .fr-tc{ width:min(100%, 280px); }
/* 돌아가는 무지갯빛 테두리(종류 색) */
.fr-tc::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; z-index:3; pointer-events:none;
  background:conic-gradient(from var(--fr-ang), transparent 0 55%, var(--kc) 70%, #fff 75%, var(--kc) 80%, transparent 95%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:frTcSpin 3.2s linear infinite; animation-delay:calc(var(--i) * -.6s); opacity:.9; }
.fr-tc:active{ transform:scale(.965); }
@media (hover:hover){ .fr-tc:hover{ transform:translateY(-3px) scale(1.015); box-shadow:0 16px 34px rgba(0,0,0,.55), 0 0 22px color-mix(in srgb, var(--kc) 45%, transparent); } }

.fr-tc-media{ position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:linear-gradient(135deg, color-mix(in srgb, var(--kc) 55%, #111), #14161d 70%); }
.fr-tc-media img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.08); animation:frTcKen 9s ease-in-out infinite alternate; }
.fr-tc-ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; }
.fr-tc-ph svg{ width:46px; height:46px; opacity:.92; filter:drop-shadow(0 0 14px var(--kc)); animation:frTcFloat 2.6s ease-in-out infinite; }
.fr-tc-noimg .fr-tc-media::after{ content:""; position:absolute; inset:-40%; background:radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--kc) 55%, transparent), transparent 45%);
  animation:frTcBlob 6s ease-in-out infinite alternate; }
.fr-tc-shade{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.28), transparent 38%, transparent 60%, rgba(0,0,0,.55)); z-index:1; }
/* 번쩍 — 사선 광택이 등장 때 한 번, 그 뒤로 몇 초마다 */
.fr-tc-shine{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 46%, rgba(255,255,255,.1) 52%, transparent 62%);
  transform:translateX(-120%); animation:frTcShine 4.6s ease-in-out infinite; animation-delay:calc(var(--i) * 140ms + .55s); mix-blend-mode:screen; }
.fr-tc-badge{ position:absolute; left:9px; top:9px; z-index:2; font-size:10.5px; font-weight:900; letter-spacing:.02em; padding:4px 8px; border-radius:999px;
  background:color-mix(in srgb, var(--kc) 88%, #000); color:#fff; box-shadow:0 2px 10px color-mix(in srgb, var(--kc) 55%, transparent); }
.fr-tc-n{ position:absolute; right:9px; top:8px; z-index:2; min-width:26px; height:26px; padding:0 7px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:900; font-style:normal; color:#111; background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.25), 0 4px 12px rgba(0,0,0,.4);
  animation:frTcPop .5s cubic-bezier(.2,1.6,.4,1) both; animation-delay:calc(var(--i) * 90ms + .45s); }
.fr-tc-pickrib{ position:absolute; left:9px; bottom:9px; z-index:2; font-size:10.5px; font-weight:900; padding:4px 9px; border-radius:999px; color:#1a1400;
  background:linear-gradient(90deg,#ffd76a,#fff3c4,#ffc93c); background-size:200% 100%; animation:frTcGold 2.2s linear infinite; box-shadow:0 0 16px rgba(255,210,90,.6); }
.fr-tc-pick{ box-shadow:0 12px 30px rgba(0,0,0,.5), 0 0 26px rgba(255,210,90,.35), 0 0 0 1px rgba(255,210,90,.35); }
.fr-tc-pick::before{ background:conic-gradient(from var(--fr-ang), transparent 0 45%, #ffd76a 62%, #fff 70%, #ffc93c 78%, transparent 95%); }

.fr-tc-body{ display:flex; flex-direction:column; gap:3px; padding:10px 12px 11px; position:relative; z-index:1;
  background:linear-gradient(180deg, color-mix(in srgb, var(--kc) 10%, #12141b), #0f1117); }
.fr-tc-t{ font-size:14px; font-weight:850; line-height:1.3; color:#f4f6ff; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.fr-tc-s{ font-size:11.5px; color:#aab3c8; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fr-tc-cta{ align-self:flex-start; margin-top:5px; display:inline-flex; align-items:center; gap:3px; font-size:11.5px; font-weight:800; color:#fff;
  padding:5px 10px 5px 11px; border-radius:999px; background:color-mix(in srgb, var(--kc) 70%, #1b1d26);
  box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 0 14px color-mix(in srgb, var(--kc) 40%, transparent); }
.fr-tc-cta svg{ width:13px; height:13px; transition:transform .2s; }
.fr-tc:active .fr-tc-cta svg{ transform:translateX(3px); }

/* 누르면: 번쩍 빛나며 튀어 오른다 */
.fr-tc-go{ animation:frTcGo .36s cubic-bezier(.3,1.5,.5,1) forwards !important; opacity:1; }
.fr-tc-go .fr-tc-shine{ animation:frTcShineFast .34s ease-out forwards; }
.fr-tc-go::after{ content:""; position:absolute; inset:0; z-index:4; border-radius:inherit; background:radial-gradient(circle at 50% 40%, rgba(255,255,255,.75), transparent 60%); animation:frTcFlash .36s ease-out forwards; pointer-events:none; }

/* 다지선다 — 번호 빠른 선택 줄 */
.fr-deck-pick{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.fr-deck-num{ display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:6px 11px 6px 6px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); color:#dfe5f5; font-size:12px; font-weight:700;
  opacity:0; animation:frTcRise .45s ease forwards; animation-delay:calc(var(--i) * 70ms + .5s); -webkit-tap-highlight-color:transparent; }
.fr-deck-num b{ width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:11.5px; color:#111; background:#fff; }
.fr-deck-num span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:120px; }
.fr-deck-num:active{ transform:scale(.94); background:rgba(255,255,255,.12); }

/* 글로 된 선택지(카드 없는 다지선다)도 살아 있게 */
.fr-choices .fr-choice{ opacity:0; animation:frTcRise .42s ease forwards; }
.fr-choices .fr-choice:nth-child(2){ animation-delay:.07s } .fr-choices .fr-choice:nth-child(3){ animation-delay:.14s }
.fr-choices .fr-choice:nth-child(4){ animation-delay:.21s } .fr-choices .fr-choice:nth-child(5){ animation-delay:.28s }

@keyframes frTcDeal{ to{ opacity:1; transform:none; } }
@keyframes frTcSpin{ to{ --fr-ang:360deg; } }
@keyframes frTcKen{ from{ transform:scale(1.08) translate(0,0); } to{ transform:scale(1.18) translate(-3%,-2%); } }
@keyframes frTcFloat{ 50%{ transform:translateY(-4px) scale(1.05); } }
@keyframes frTcBlob{ to{ transform:translate(20%,15%) scale(1.2); } }
@keyframes frTcShine{ 0%{ transform:translateX(-120%); } 22%,100%{ transform:translateX(120%); } }
@keyframes frTcShineFast{ from{ transform:translateX(-120%); } to{ transform:translateX(120%); } }
@keyframes frTcPop{ from{ transform:scale(0); } to{ transform:scale(1); } }
@keyframes frTcGold{ to{ background-position:-200% 0; } }
@keyframes frTcGo{ 0%{ transform:scale(1); } 45%{ transform:scale(1.06) translateY(-4px); box-shadow:0 0 0 2px #fff, 0 0 40px var(--kc); } 100%{ transform:scale(1); } }
@keyframes frTcFlash{ from{ opacity:1; } to{ opacity:0; } }
@keyframes frTcRise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .fr-tc, .fr-deck-num, .fr-choices .fr-choice{ animation:none !important; opacity:1; transform:none; }
  .fr-tc::before, .fr-tc-media img, .fr-tc-shine, .fr-tc-ph svg, .fr-tc-noimg .fr-tc-media::after, .fr-tc-pickrib{ animation:none !important; }
}
/* 번호 빠른 선택 — 제목은 카드에 있으니 번호 동그라미만 한 줄로 */
.fr-deck-pick{ flex-wrap:nowrap; align-items:center; gap:7px; margin-top:4px; }
.fr-deck-pick::before{ content:"번호로 고르기"; font-size:11px; font-weight:700; color:#8c96ad; margin-right:2px; white-space:nowrap; }
.fr-deck-num{ padding:0; border-radius:50%; width:32px; height:32px; justify-content:center; background:rgba(255,255,255,.06); }
.fr-deck-num b{ width:auto; height:auto; background:none; color:#fff; font-size:13.5px; }
.fr-deck-num span{ display:none; }
.fr-deck-num:active{ background:#fff; } .fr-deck-num:active b{ color:#111; }

/* 🔽 미니 모드 말풍선 — 알약 위에 갈비스 한 마디(탭하면 대화로 복귀) */
#frMiniSay{ position:fixed; right:12px; z-index:946; bottom:calc(env(safe-area-inset-bottom,0px) + 128px); max-width:230px;
  padding:9px 13px; border-radius:16px 16px 4px 16px; border:1px solid rgba(95,216,255,.45); cursor:pointer; text-align:left;
  background:linear-gradient(180deg, rgba(18,30,46,.97), rgba(9,15,25,.98)); color:#e6f6ff; font-size:13px; font-weight:700; line-height:1.35;
  box-shadow:0 0 18px rgba(95,216,255,.35), 0 8px 24px rgba(0,0,0,.5); display:none; transform-origin:100% 100%; -webkit-tap-highlight-color:transparent; }
#frMiniSay.on{ display:block; animation:frMiniSayIn .5s cubic-bezier(.34,1.56,.64,1) both, frMiniSayOut .4s ease 6.6s forwards; }
@keyframes frMiniSayIn{ from{ opacity:0; transform:translateY(10px) scale(.6); } to{ opacity:1; transform:none; } }
@keyframes frMiniSayOut{ to{ opacity:0; transform:translateY(6px) scale(.9); } }
body.fr-docked #frMiniSay, body.dm-detail #frMiniSay, body.hv-playing #frMiniSay{ display:none !important; }
/* 한 장 카드 안내(말풍선 대신) */
.fr-deck-hint{ font-size:11.5px; font-weight:700; color:#8c96ad; margin:2px 2px 0; }
/* 하단 입력바(댓글·배틀 참전·숏판 댓글)가 있는 화면 — 미니 알약·말풍선을 입력바 위로(참전 '등록' 버튼을 덮었다, 26.9.22 실측) */
body:has(.comment-write) #frMini, body:has(.battle-input-bar) #frMini, body:has(#shortsCommentModal.visible) #frMini{
  bottom: calc(env(safe-area-inset-bottom,0px) + 172px); }
body:has(.comment-write) #frMiniSay, body:has(.battle-input-bar) #frMiniSay, body:has(#shortsCommentModal.visible) #frMiniSay{
  bottom: calc(env(safe-area-inset-bottom,0px) + 222px); }

  width:min(300px, calc(100vw - 20px)); display:none; flex-direction:column; gap:7px; padding:9px 10px 10px;
  border-radius:18px; border:1px solid rgba(95,216,255,.38);
  background:linear-gradient(180deg, rgba(14,22,34,.72), rgba(8,12,20,.78));
  -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 12px 32px rgba(0,0,0,.45), 0 0 20px rgba(95,216,255,.16); color:#e8f5ff; transform-origin:100% 100%; }
  background:radial-gradient(circle at 50% 45%, rgba(18,32,48,.96), rgba(6,10,18,.98) 72%); box-shadow:inset 0 0 6px rgba(95,216,255,.3); }
  background:linear-gradient(135deg,#4361ff,#5b8cff); box-shadow:0 0 14px rgba(91,140,255,.45); }


  background:linear-gradient(90deg, transparent, rgba(10,16,26,.95) 40%); }

/* ══════════ 🏝 갈비스 아일랜드(26.9.22) ══════════ */
@property --fri-a { syntax:"<angle>"; initial-value:0deg; inherits:false; }
#frAssist.fri{ position:fixed; left:50%; z-index:10060;   /* 맛집·여행 상세 시트(z 10000) 위로 */ bottom:calc(env(safe-area-inset-bottom,0px) + 84px);
  transform:translateX(-50%); width:auto; max-width:min(78vw, 300px); display:none; flex-direction:column;
  border-radius:26px; color:#eef7ff; isolation:isolate;
  background:linear-gradient(180deg, rgba(22,28,42,.78), rgba(10,13,22,.86));
  -webkit-backdrop-filter:blur(22px) saturate(1.6); backdrop-filter:blur(22px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.07), 0 14px 38px rgba(0,0,0,.5);
  transition:max-width .45s cubic-bezier(.34,1.45,.5,1), border-radius .35s ease, box-shadow .3s ease; }
#frAssist.fri.on{ display:flex; animation:friIn .55s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes friIn{ from{ opacity:0; transform:translateX(-50%) translateY(20px) scale(.6); } to{ opacity:1; transform:translateX(-50%); } }
#frAssist.fri.fri-pop{ animation:friPop .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes friPop{ 0%{ transform:translateX(-50%) scale(.96); } 50%{ transform:translateX(-50%) scale(1.03); } 100%{ transform:translateX(-50%); } }
/* 생각 중 — 테두리가 빛나며 돈다(제미나이 글로우) */
#frAssist.fri::before{ content:""; position:absolute; inset:-1.5px; border-radius:inherit; padding:1.5px; z-index:-1; pointer-events:none;
  background:conic-gradient(from var(--fri-a), #5fd8ff, #7b4dff, #ff5fa8, #ffd76a, #5fd8ff);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.35; animation:friSpin 6s linear infinite; transition:opacity .3s; }
#frAssist.fri.fri-think::before{ opacity:1; animation-duration:1.6s; filter:drop-shadow(0 0 8px rgba(123,77,255,.7)); }
@keyframes friSpin{ to{ --fri-a:360deg; } }
/* 캡슐 줄 */
.fri-top{ display:flex; align-items:center; gap:2px; padding:5px 6px 5px 5px; }
.fri-cap{ flex:1; min-width:0; display:flex; align-items:center; gap:8px; background:none; border:0; color:inherit; padding:0 4px 0 0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.fri-orb{ width:34px; height:34px; flex:0 0 auto; overflow:visible; }
.fri-orb .fri-ring{ transform-origin:20px 20px; animation:friRing 3.2s linear infinite; }
.fri-think .fri-orb .fri-ring{ animation-duration:.9s; }
.fri-orb .fri-body{ transform-origin:20px 20px; animation:friBreath 3.4s ease-in-out infinite; }
.fri-orb .fri-eyes{ transform-origin:20px 20.5px; animation:friBlink 4.2s infinite; }
.fri-think .fri-orb .fri-eyes{ animation:friLook 1.4s ease-in-out infinite; }
@keyframes friRing{ to{ transform:rotate(360deg); } }
@keyframes friBreath{ 50%{ transform:scale(1.06); } }
@keyframes friBlink{ 0%,92%,100%{ transform:scaleY(1); } 95%{ transform:scaleY(.1); } }
@keyframes friLook{ 0%,100%{ transform:translateX(-1.6px); } 50%{ transform:translateX(1.6px); } }
.fri-tick{ flex:1; min-width:0; font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left; color:#dff3ff; }
.fri-wave{ width:20px; height:16px; flex:0 0 auto; fill:#8fe6ff; opacity:0; transition:opacity .2s; }
.fri-think .fri-wave{ opacity:1; }
.fri-wave rect{ transform-origin:center; animation:friBar .8s ease-in-out infinite; }
.fri-wave rect:nth-child(2){ animation-delay:.12s } .fri-wave rect:nth-child(3){ animation-delay:.24s } .fri-wave rect:nth-child(4){ animation-delay:.36s }
@keyframes friBar{ 0%,100%{ transform:scaleY(.4); } 50%{ transform:scaleY(1.2); } }
.fri-ic{ display:none; width:30px; height:30px; border:0; border-radius:50%; background:rgba(255,255,255,.06); color:#a9c4d6; align-items:center; justify-content:center; cursor:pointer; margin-left:4px; }
.fri-ic svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
/* 펼친 카드 */
.fri-card{ display:flex; flex-direction:column; max-height:0; overflow:hidden; opacity:0; transition:max-height .45s cubic-bezier(.3,1.2,.5,1), opacity .22s ease, padding .3s ease; }
#frAssist.fri.fri-open{ max-width:min(calc(100vw - 24px), 420px); width:min(calc(100vw - 24px), 420px); border-radius:24px; }
#frAssist.fri.fri-open .fri-ic{ display:flex; }
#frAssist.fri.fri-open .fri-tick{ opacity:.0; }
.fri-card{ padding:0 14px; }
#frAssist.fri.fri-open .fri-card{ padding:0 14px 12px; max-height:62vh; opacity:1; }
#frAssist .fra-msg{ font-size:15px; line-height:1.55; white-space:pre-line; color:#f2f8ff; max-height:7.8em; overflow-y:auto; margin:2px 0 10px; cursor:pointer;
  -webkit-mask:linear-gradient(180deg,#000 80%,transparent); mask:linear-gradient(180deg,#000 80%,transparent); }
#frAssist.fri-full .fra-msg{ max-height:44vh; -webkit-mask:none; mask:none; }
#frAssist .fra-cards{ align-self:flex-start; margin:0 0 10px; font-size:12.5px; font-weight:800; color:#fff; border:0; border-radius:999px; padding:6px 12px; cursor:pointer;
  background:linear-gradient(135deg,#4361ff,#7b4dff); box-shadow:0 0 16px rgba(123,77,255,.45); }
#frAssist .fra-quick{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:10px; }
#frAssist .fra-q{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:#e9f6ff; cursor:pointer;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.07); border-radius:999px; padding:7px 12px 7px 10px;
  opacity:0; transform:translateY(8px) scale(.9); }
#frAssist.fri-open .fra-q{ animation:friChip .42s cubic-bezier(.34,1.56,.64,1) forwards; animation-delay:calc(var(--qi) * 70ms + .15s); }
@keyframes friChip{ to{ opacity:1; transform:none; } }
#frAssist .fra-q svg{ width:15px; height:15px; fill:none; stroke:#8fe6ff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#frAssist .fra-q:active{ transform:scale(.94); background:rgba(143,230,255,.18); }
#frAssist .fra-in{ display:flex; gap:7px; align-items:center; }
#frAssist .fra-in input{ flex:1; min-width:0; height:40px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.28); color:#fff; padding:0 14px; font-size:16px; outline:none; }
#frAssist .fra-in input:focus{ border-color:rgba(143,230,255,.55); box-shadow:0 0 0 3px rgba(95,216,255,.15); }
#frAssist .fra-send{ width:40px; height:40px; border-radius:50%; border:0; background:linear-gradient(135deg,#6fe0ff,#4a6bff); color:#05121c; display:flex; align-items:center; justify-content:center; cursor:pointer; }
#frAssist .fra-send svg{ width:17px; height:17px; }
/* 반짝이 — 답이 도착할 때 */
.fri-spark{ position:absolute; left:26px; top:22px; width:0; height:0; z-index:3; pointer-events:none; }
.fri-spark svg{ position:absolute; width:9px; height:9px; fill:#ffe9a8; filter:drop-shadow(0 0 4px #ffd76a); animation:friSpk .8s ease-out forwards; }
@keyframes friSpk{ from{ transform:translate(0,0) scale(.3) rotate(0); opacity:1; } to{ transform:translate(var(--dx),var(--dy)) scale(1) rotate(90deg); opacity:0; } }
/* 입력바 있는 화면은 그 위로 · 대화창 열린 동안 숨김 */
body:has(.comment-write) #frAssist.fri, body:has(.battle-input-bar) #frAssist.fri, body:has(#shortsCommentModal.visible) #frAssist.fri{ bottom:calc(env(safe-area-inset-bottom,0px) + 168px); }
body.fr-chatting #frAssist, body.dm-detail #frAssist{ display:none !important; }   /* 26.9.22 영상 재생 중(hv-playing)에도 아일랜드는 남는다 — 영상은 위, 아일랜드는 아래라 안 겹친다(시뮬레이터 QA: 영상 페이지에서 미니가 사라졌다) */
@media(min-width:1100px){ #frAssist.fri{ left:auto; right:26px; bottom:26px; transform:none; } #frAssist.fri.on{ animation:none; } }
@media (prefers-reduced-motion: reduce){ #frAssist.fri *, #frAssist.fri::before{ animation:none !important; transition:none !important; } }

/* 🕺 아일랜드 졸라맨 갈비스 */
.fri-man{ width:28px; height:32px; color:#8fe6ff; filter:drop-shadow(0 0 6px rgba(95,216,255,.55)); overflow:visible; }
.fri-man .fm-all{ transform-origin:13px 31px; animation:fmBob 1.1s ease-in-out infinite; }
.fri-man .fm-p-think, .fri-man .fm-p-cheer, .fri-man .fm-dots{ display:none; }
.fri-man .fm-arm{ transform-origin:13px 14.4px; animation:fmWave .9s ease-in-out infinite; }
.fri-man .fm-dots{ fill:#dff6ff; }
.fri-man .fm-dots circle{ animation:fmDot 1s ease-in-out infinite; }
.fri-man .fm-dots circle:nth-child(2){ animation-delay:.15s } .fri-man .fm-dots circle:nth-child(3){ animation-delay:.3s }
@keyframes fmBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-2px); } }
@keyframes fmWave{ 0%,100%{ transform:rotate(0); } 50%{ transform:rotate(-28deg); } }
@keyframes fmDot{ 0%,80%,100%{ opacity:.2; transform:translateY(0); } 40%{ opacity:1; transform:translateY(-1.5px); } }
/* 생각 중 — 턱 괴고 갸웃 + … */
.fri-think .fri-man .fm-p-wave{ display:none; } .fri-think .fri-man .fm-p-think, .fri-think .fri-man .fm-dots{ display:inline; }
.fri-think .fri-man .fm-all{ animation:fmTilt 1.6s ease-in-out infinite; transform-origin:13px 22px; }
@keyframes fmTilt{ 0%,100%{ transform:rotate(-6deg); } 50%{ transform:rotate(5deg); } }
/* 답 도착 — 두 팔 번쩍 점프 */
.fri-pop .fri-man .fm-p-wave{ display:none; } .fri-pop .fri-man .fm-p-cheer{ display:inline; }
.fri-pop .fri-man .fm-all{ animation:fmJump .7s cubic-bezier(.3,1.6,.5,1) 2; }
@keyframes fmJump{ 0%,100%{ transform:translateY(0) scaleY(1); } 20%{ transform:translateY(1px) scaleY(.9); } 55%{ transform:translateY(-6px) scaleY(1.05); } }

/* 아일랜드 안 확인 버튼(저장·참여·투표) */
.fri-cf{ display:flex; gap:8px; margin:0 0 10px; }
.fri-cf[hidden]{ display:none; }
.fri-cf button{ height:38px; border-radius:999px; border:0; font-size:14px; font-weight:800; cursor:pointer; padding:0 16px; }
.fri-cf-yes{ flex:1; color:#fff; background:linear-gradient(135deg,#4361ff,#7b4dff); box-shadow:0 0 18px rgba(123,77,255,.5); animation:friCfIn .45s cubic-bezier(.34,1.56,.64,1); }
.fri-cf-no{ color:#cfe0ee; background:rgba(255,255,255,.08); }
@keyframes friCfIn{ from{ transform:scale(.8); opacity:0; } to{ transform:none; opacity:1; } }

/* ══════════ ✨ 답 글 꾸미기(26.9.22) ══════════ */
.rx-num{ color:#7ff0ff; font-weight:850; font-variant-numeric:tabular-nums; text-shadow:0 0 10px rgba(63,224,255,.65); }
.rx-u{ color:#9fdcef; font-weight:700; margin-left:1px; }
.rx-star{ color:#ffcf6a; font-weight:800; text-shadow:0 0 10px rgba(255,190,80,.55); }
.rx-star .rx-num{ color:#ffe3a3; text-shadow:0 0 10px rgba(255,190,80,.7); }
.rx-time{ color:#ffd58a; font-weight:800; padding:0 5px; margin:0 1px; border-radius:6px; background:rgba(255,179,71,.12); box-shadow:inset 0 0 0 1px rgba(255,179,71,.38); }
.rx-q{ color:#f2feff; font-weight:750; background:linear-gradient(transparent 64%, rgba(63,224,255,.34) 64%) no-repeat 0 0 / 100% 100%; border-radius:2px; }
.rx-new .rx-q{ animation:rxUnder .7s ease-out both; animation-delay:calc(var(--d,0ms) + 180ms); background-size:0% 100%; }
@keyframes rxUnder{ to{ background-size:100% 100%; } }
.rx-side{ font-weight:850; padding:0 5px; border-radius:6px; }
.rx-side.pro{ color:#9cc0ff; background:rgba(79,124,255,.16); box-shadow:inset 0 0 0 1px rgba(111,150,255,.45); }
.rx-side.con{ color:#ff9fae; background:rgba(255,79,109,.14); box-shadow:inset 0 0 0 1px rgba(255,110,135,.45); }
.rx-li{ display:flex; gap:9px; align-items:flex-start; margin:6px 0; }
.rx-li:first-child{ margin-top:2px; }
.rx-ln{ flex:0 0 auto; min-width:21px; height:21px; margin-top:1px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center; font-style:normal;
  font-size:11.5px; font-weight:900; color:#04121c; background:linear-gradient(135deg,#7ff0ff,#3aa8ff); box-shadow:0 0 12px rgba(63,224,255,.55); }
.rx-new .rx-li-in{ animation:rxLi .5s cubic-bezier(.2,1.3,.4,1) both; animation-delay:var(--d,0ms); }
@keyframes rxLi{ from{ opacity:0; transform:translateX(-12px); } }
/* 단어가 흐릿→또렷 */
.rx-new .rx-w{ display:inline-block; opacity:0; filter:blur(5px); transform:translateY(4px); animation:rxIn .44s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:var(--d,0ms); }
.rx-new .rx-li-in .rx-w{ transform:none; }
@keyframes rxIn{ to{ opacity:1; filter:blur(0); transform:none; } }
/* 답이 도착할 때 말풍선에 빛이 한 번 스친다 */
.fr-msg.fr-a.rx-new .fr-bubble{ position:relative; overflow:hidden; }
.fr-msg.fr-a.rx-new .fr-bubble::after{ content:""; position:absolute; inset:0; pointer-events:none; transform:translateX(-120%);
  background:linear-gradient(105deg, transparent 35%, rgba(127,240,255,.28) 50%, transparent 65%); animation:rxShine 1.1s ease-out .1s forwards; }
@keyframes rxShine{ to{ transform:translateX(120%); } }
@media (prefers-reduced-motion: reduce){ .rx-new .rx-w, .rx-new .rx-li-in, .rx-new .rx-q, .fr-msg.fr-a.rx-new .fr-bubble::after{ animation:none !important; opacity:1; filter:none; transform:none; background-size:100% 100%; } }

/* 🎬 생각하는 동안 — 네 색 글로우 알약 + 크레딧 */
@property --rx-a { syntax:"<angle>"; initial-value:0deg; inherits:false; }
.fr-typing.fr-think{ position:relative; display:inline-flex !important; align-items:center; gap:10px; padding:9px 14px 9px 12px !important; border-radius:999px !important;
  background:rgba(6,16,28,.85) !important; isolation:isolate; }
.fr-typing.fr-think::before{ content:""; position:absolute; inset:-1.5px; border-radius:inherit; padding:1.5px; z-index:-1;
  background:conic-gradient(from var(--rx-a), #3fd3ff, #9b7bff, #ff6f91, #ffb347, #3fd3ff);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:rxSpin 1.8s linear infinite; }
.fr-typing.fr-think::after{ content:""; position:absolute; inset:-6px; border-radius:inherit; z-index:-2; filter:blur(12px); opacity:.55;
  background:conic-gradient(from var(--rx-a), #3fd3ff, #9b7bff, #ff6f91, #ffb347, #3fd3ff); animation:rxSpin 1.8s linear infinite; }
@keyframes rxSpin{ to{ --rx-a:360deg; } }
.ft-dots{ display:inline-flex; gap:4px; } .ft-dots i{ width:6px !important; height:6px !important; border-radius:50%; background:#8fe6ff !important; animation:ftDot 1s infinite ease-in-out !important; }
.ft-dots i:nth-child(2){ animation-delay:.15s !important } .ft-dots i:nth-child(3){ animation-delay:.3s !important }
@keyframes ftDot{ 0%,80%,100%{ opacity:.25; transform:translateY(0) } 40%{ opacity:1; transform:translateY(-3px) } }
.ft-roll{ display:inline-block; height:18px; overflow:hidden; -webkit-mask:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent); mask:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent); }
.ft-track{ display:flex; flex-direction:column; animation:ftRoll 5.4s steps(1) infinite, ftRollS 5.4s cubic-bezier(.6,0,.2,1) infinite; }
.ft-track span{ height:18px; line-height:18px; font-size:13px; font-weight:750; color:#dff6ff; white-space:nowrap; letter-spacing:.02em; }
@keyframes ftRollS{ 0%,14%{ transform:translateY(0) } 20%,34%{ transform:translateY(-18px) } 40%,54%{ transform:translateY(-36px) } 60%,74%{ transform:translateY(-54px) } 80%,94%{ transform:translateY(-72px) } 100%{ transform:translateY(-90px) } }
@keyframes ftRoll{ 0%{ opacity:1 } }
/* ✨ 답 도착 — 첫 말풍선 둘레를 네 색 빛이 빨라졌다 느려지며 한 바퀴 돌고 가라앉는다 */
.fr-msg.fr-a.rx-glow .fr-bubble{ position:relative; isolation:isolate; overflow:visible; }
.fr-msg.fr-a.rx-glow .fr-bubble > .rxg{ display:none; }
.fr-msg.fr-a.rx-glow{ position:relative; }
.fr-msg.fr-a.rx-glow .fr-bubble::before{ content:""; position:absolute; inset:-2px; border-radius:inherit; padding:2px; z-index:-1; pointer-events:none;
  background:conic-gradient(from var(--rx-a), #3fd3ff, #9b7bff, #ff6f91, #ffb347, #3fd3ff);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:rxOnce 1.8s cubic-bezier(.45,0,.2,1) forwards; box-shadow:0 0 18px rgba(155,123,255,.5); }
@keyframes rxOnce{ 0%{ --rx-a:0deg; opacity:0 } 12%{ opacity:1 } 75%{ opacity:1 } 100%{ --rx-a:360deg; opacity:0 } }
@media (prefers-reduced-motion: reduce){ .fr-typing.fr-think::before, .fr-typing.fr-think::after, .ft-track, .fr-msg.fr-a.rx-glow .fr-bubble::before{ animation:none !important; } }

/* ══════════ 🤖 자비스 오마주 — 갈비스 얼굴 + HUD 통일(26.9.22) ══════════ */
.gf{ display:block; overflow:visible; filter:drop-shadow(0 0 5px rgba(63,224,255,.55)); }
.gf .gf-spin{ transform-origin:50px 50px; animation:gfRot 12s linear infinite; }
.gf .gf-spinr{ transform-origin:50px 50px; animation:gfRot 7s linear infinite reverse; }
.gf .gf-spin2{ transform-origin:50px 50px; animation:gfRot 20s linear infinite; }
.gf .gf-orbit{ transform-origin:50px 50px; animation:gfRot 3.6s linear infinite; }
@keyframes gfRot{ to{ transform:rotate(360deg); } }
.gf .gf-rtext{ font-size:4.1px; letter-spacing:1.35px; font-weight:800; fill:#7ff0ff; opacity:.85; }
.gf .vbar{ transform-box:fill-box; transform-origin:50% 100%; animation:gfV 2.8s ease-in-out infinite; }
@keyframes gfV{ 0%,100%{ transform:scaleY(.35) } 50%{ transform:scaleY(.6) } }
.gf .gf-eye{ transform-box:fill-box; transform-origin:center; animation:gfBlink 4.2s infinite; }
@keyframes gfBlink{ 0%,91%,100%{ transform:scaleY(1) } 94%{ transform:scaleY(.08) } }
.gf .gf-pupils{ animation:gfLook 6s ease-in-out infinite; }
@keyframes gfLook{ 0%,40%,100%{ transform:translate(0,0) } 50%,70%{ transform:translate(1.6px,1.4px) } 80%{ transform:translate(-1.2px,0) } }
.gf .gf-mouth rect{ transform-box:fill-box; transform-origin:center; animation:gfM 2.6s ease-in-out infinite; }
@keyframes gfM{ 50%{ transform:scaleY(.5) } }
.gf .gf-scan{ animation:gfScan 2.8s linear infinite; }
@keyframes gfScan{ from{ transform:translateY(0) } to{ transform:translateY(62px) } }
.gf .gf-happy, .gf .gf-prog{ display:none; }
/* 생각 */
.gf-think .gf .gf-spin{ animation-duration:2.2s } .gf-think .gf .gf-spinr{ animation-duration:1.4s }
.gf-think .gf .gf-eye{ animation:none; transform:scaleY(.38) }
.gf-think .gf .gf-eyes{ animation:gfScanE 1.1s ease-in-out infinite }
@keyframes gfScanE{ 0%,100%{ transform:translateX(-3px) } 50%{ transform:translateX(3px) } }
.gf-think .gf .gf-mouth rect{ animation:none; transform:scaleY(.3) }
.gf-think .gf .gf-prog{ display:inline }
.gf-think .gf .gf-prog circle{ transform-origin:50px 50px; animation:gfProg 1.4s cubic-bezier(.6,0,.4,1) infinite }
@keyframes gfProg{ 0%{ stroke-dasharray:4 300; transform:rotate(0) } 50%{ stroke-dasharray:120 300 } 100%{ stroke-dasharray:4 300; transform:rotate(720deg) } }
/* 말하기 */
.gf-speak .gf .gf-mouth rect{ animation:gfMS .42s ease-in-out infinite }
.gf-speak .gf .gf-mouth rect:nth-child(2n){ animation-delay:.1s } .gf-speak .gf .gf-mouth rect:nth-child(3n){ animation-delay:.2s }
@keyframes gfMS{ 0%,100%{ transform:scaleY(.35) } 50%{ transform:scaleY(1.6) } }
.gf-speak .gf .vbar{ animation:gfVS .5s ease-in-out infinite }
@keyframes gfVS{ 0%,100%{ transform:scaleY(.3) } 50%{ transform:scaleY(1.25) } }
/* 기쁨 */
.gf-happy .gf .gf-eyes{ display:none } .gf-happy .gf .gf-happy{ display:inline } .gf-happy .gf .vbar{ animation:gfVS 1s ease-in-out infinite }

/* 오브 — 얼굴이 곧 오브 */
#frOrb{ width:64px !important; height:64px !important; background:radial-gradient(circle, rgba(6,26,42,.96), rgba(2,8,14,.98) 70%) !important;
  box-shadow:0 0 0 1px rgba(63,224,255,.3), 0 0 28px rgba(63,224,255,.38) !important; }
#frOrb > .fr-ring, #frOrb > .fr-core{ display:none !important; }
#frOrb .gf-host{ position:absolute; inset:1px; display:block; }
#frOrb::after{ content:""; position:absolute; inset:-6px; border-radius:50%; border:1px solid rgba(63,224,255,.28); animation:gfPing 2.6s ease-out infinite; pointer-events:none; }
@keyframes gfPing{ from{ transform:scale(.9); opacity:.9 } to{ transform:scale(1.32); opacity:0 } }
#frOrb .fr-dot{ background:#ffb347 !important; box-shadow:0 0 10px #ffb347 !important; }
/* 대화창 머리 */
.fr-head .fr-av.gf-host{ width:44px !important; height:44px !important; background:none !important; box-shadow:none !important; }
.fr-head{ position:relative; }
.fr-head::after{ content:""; position:absolute; left:14px; right:14px; bottom:-6px; height:8px; pointer-events:none; opacity:.55;
  background:repeating-linear-gradient(90deg, rgba(63,224,255,.55) 0 1px, transparent 1px 8px);
  -webkit-mask:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent); mask:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent); }
#frSheet .fr-panel{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48' viewBox='0 0 28 48'%3E%3Cpath d='M14 0l14 8v16l-14 8L0 24V8z M14 32l14 8v16 M14 32L0 40v16' fill='none' stroke='%233fe0ff' stroke-opacity='.07' stroke-width='1'/%3E%3C/svg%3E"), linear-gradient(180deg, rgba(4,14,26,.97), rgba(2,7,13,.99)) !important; }
/* 사용자 말풍선 = 앰버(자비스 HUD 포인트색) */
.fr-msg.fr-u{ color:#1a0f00 !important; font-weight:600; background:linear-gradient(135deg,#ffd58a,#ffb347) !important; box-shadow:0 0 14px rgba(255,179,71,.35) !important; }
/* 미니 알약 얼굴 */
#frMini .fr-mav.gf-host{ width:34px !important; height:34px !important; background:none !important; box-shadow:none !important; }
#frMini .fr-mav.gf-host > .fr-ring, #frMini .fr-mav.gf-host > .fr-core{ display:none; }

/* 아일랜드 HUD */
#frAssist.fri{ border-radius:14px !important; background:linear-gradient(180deg, rgba(4,14,26,.8), rgba(2,8,15,.88)) !important; }
#frAssist.fri.fri-open{ border-radius:14px !important; }
#frAssist .fri-face{ display:block; width:40px; height:40px; flex:0 0 auto; }
#frAssist .fri-man{ display:none; }
#frAssist .hud-hex{ position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:.08;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48' viewBox='0 0 28 48'%3E%3Cpath d='M14 0l14 8v16l-14 8L0 24V8z M14 32l14 8v16 M14 32L0 40v16' fill='none' stroke='%233fe0ff' stroke-width='1'/%3E%3C/svg%3E"); }
#frAssist .hud-br{ position:absolute; width:13px; height:13px; border:1.6px solid #3fe0ff; pointer-events:none; filter:drop-shadow(0 0 4px #3fe0ff); z-index:2; }
#frAssist .hud-br.tl{ left:-1px; top:-1px; border-right:0; border-bottom:0 } #frAssist .hud-br.tr{ right:-1px; top:-1px; border-left:0; border-bottom:0 }
#frAssist .hud-br.bl{ left:-1px; bottom:-1px; border-right:0; border-top:0 } #frAssist .hud-br.brr{ right:-1px; bottom:-1px; border-left:0; border-top:0 }
#frAssist .hud-scan{ position:absolute; left:0; right:0; top:-50%; height:50%; pointer-events:none; z-index:1; opacity:0;
  background:linear-gradient(180deg, transparent, rgba(63,224,255,.14) 70%, rgba(63,224,255,.5) 98%, transparent); }
#frAssist.hud-boot .hud-scan{ animation:hudScan 1.1s cubic-bezier(.5,0,.5,1) both; }
@keyframes hudScan{ 0%{ top:-50%; opacity:1 } 100%{ top:110%; opacity:1 } }
#frAssist.hud-boot .hud-br.tl{ animation:hudTL .5s cubic-bezier(.2,1.4,.4,1) both } #frAssist.hud-boot .hud-br.tr{ animation:hudTR .5s cubic-bezier(.2,1.4,.4,1) both }
#frAssist.hud-boot .hud-br.bl{ animation:hudBL .5s cubic-bezier(.2,1.4,.4,1) both } #frAssist.hud-boot .hud-br.brr{ animation:hudBR .5s cubic-bezier(.2,1.4,.4,1) both }
@keyframes hudTL{ from{ transform:translate(-16px,-16px); opacity:0 } } @keyframes hudTR{ from{ transform:translate(16px,-16px); opacity:0 } }
@keyframes hudBL{ from{ transform:translate(-16px,16px); opacity:0 } } @keyframes hudBR{ from{ transform:translate(16px,16px); opacity:0 } }
#frAssist .fra-q{ border-radius:8px !important; position:relative; }
#frAssist .fra-q::before, #frAssist .fra-q::after{ content:""; position:absolute; width:5px; height:5px; border-color:#3fe0ff; }
#frAssist .fra-q::before{ left:-1px; top:-1px; border-left:1.5px solid; border-top:1.5px solid } #frAssist .fra-q::after{ right:-1px; bottom:-1px; border-right:1.5px solid; border-bottom:1.5px solid }
#frAssist .fra-in{ border:1px solid rgba(63,224,255,.38); border-radius:10px; background:rgba(0,0,0,.35); padding:0 5px 0 12px; }
#frAssist .fra-pr{ color:#3fe0ff; font-weight:900; font-size:15px; }
#frAssist .fra-in input{ border:0 !important; background:transparent !important; box-shadow:none !important; padding:0 6px !important; }
#frAssist .fra-send{ border-radius:8px !important; width:36px !important; height:36px !important; box-shadow:0 0 14px rgba(63,224,255,.6); }
@media (prefers-reduced-motion: reduce){ .gf *, #frOrb::after, #frAssist .hud-scan, #frAssist .hud-br{ animation:none !important; } }

/* ══════════ 내 말풍선만 금색 아님(26.9.22 사장님: 「금색은 좋은데 내 채팅까지 금색일 필요는 없다」) ══════════ */
/* 💰 내 말풍선 = 럭셔리 워치식(26.9.22 — 금은 '채움'이 아니라 '귀한 포인트'. 디자인 원칙: 금 10%·채도 낮은 샴페인 골드)
   스모크 블랙 유리 + 1px 샴페인 골드 머리카락 테두리 + 테두리를 따라 달리는 빛(번쩍). 보낼 땐 테두리가 한 번 확 빛난다. */
@property --fr-gold-a { syntax:"<angle>"; initial-value:0deg; inherits:false; }
.fr-msg.fr-u{ position:relative; isolation:isolate; color:#f6efdd !important; font-weight:500; text-shadow:none;
  background:linear-gradient(180deg, rgba(38,33,24,.9), rgba(16,14,10,.94)) !important;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 8px 22px rgba(0,0,0,.45), 0 0 18px rgba(212,175,95,.10) !important; }
.fr-msg.fr-u::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; z-index:1;
  background:conic-gradient(from var(--fr-gold-a), rgba(184,148,85,.55) 0deg, rgba(232,207,152,.9) 40deg, #fff6dc 58deg, rgba(232,207,152,.9) 76deg, rgba(184,148,85,.55) 120deg, rgba(120,96,56,.45) 240deg, rgba(184,148,85,.55) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:frGoldRun 4.5s linear infinite; }
@keyframes frGoldRun{ to{ --fr-gold-a:360deg; } }
.fr-msg.fr-u:last-child::before{ animation:frGoldFlare 1s ease-out, frGoldRun 4.5s linear 1s infinite; }
@keyframes frGoldFlare{ 0%{ filter:brightness(2.2) drop-shadow(0 0 8px #ffe7a8); } 100%{ filter:none; } }

/* ══════════ 🎬 답 등장 연출 크게(26.9.22 「동적 애니메이션 어디 갔냐」) ══════════ */
/* ⚠️ 움직이는 속성(filter·transform·opacity)에 !important 를 걸면 애니메이션을 이겨서 흐린 채로 멈춘다 — 이름·시간만 바꾼다 */
.fr-msg.rx-new .rx-w{ animation-name:rxIn2; animation-duration:.7s; animation-timing-function:cubic-bezier(.2,.9,.2,1); animation-fill-mode:both; }
@keyframes rxIn2{ 0%{ opacity:0; filter:blur(9px); transform:translateY(8px) scale(.92); text-shadow:0 0 0 transparent; }
  55%{ opacity:1; filter:blur(0); transform:none; text-shadow:0 0 14px rgba(127,240,255,.95); }
  100%{ opacity:1; filter:blur(0); transform:none; text-shadow:none; } }
.fr-msg.rx-new .rx-num.rx-w{ animation-name:rxNum; animation-duration:.9s; animation-timing-function:cubic-bezier(.2,1.5,.4,1); animation-fill-mode:both; }
@keyframes rxNum{ 0%{ opacity:0; transform:translateY(10px) scale(.6); filter:blur(6px); } 60%{ opacity:1; transform:scale(1.35); filter:blur(0); } 100%{ opacity:1; transform:none; filter:none; } }
/* 도착 순간 말풍선 위→아래 스캔 빛 */
.fr-msg.fr-a.rx-new .fr-bubble::after{ inset:0 !important; transform:translateY(-110%) !important;
  background:linear-gradient(180deg, transparent, rgba(127,240,255,.10) 60%, rgba(127,240,255,.55) 96%, transparent) !important;
  animation:rxScanDown 1s cubic-bezier(.5,0,.5,1) .05s forwards !important; }
@keyframes rxScanDown{ to{ transform:translateY(110%); } }
/* 스캔 빛이 말풍선 밖으로 새던 것 — 빛 테두리를 안쪽으로 두고 말풍선은 가둔다 */
.fr-msg.fr-a.rx-glow .fr-bubble{ overflow:hidden !important; }
.fr-msg.fr-a.rx-glow .fr-bubble::before{ inset:0 !important; z-index:2 !important; }

/* ══════════ 🌦 날씨 카드(26.9.22) ══════════ */
.fr-wx{ position:relative; display:block; width:min(100%,300px); text-align:left; border:0; padding:14px 14px 12px; border-radius:18px; overflow:hidden; cursor:pointer; color:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.12); animation:wxIn .6s cubic-bezier(.2,1.3,.4,1) both; -webkit-tap-highlight-color:transparent; }
@keyframes wxIn{ from{ opacity:0; transform:translateY(16px) scale(.94); } }
.fr-wx:active{ transform:scale(.97); }
.wx-bg-sun{ background:radial-gradient(120% 90% at 20% 10%, #3aa8ff 0%, #1c5fd6 45%, #0b2a6b 100%); }
.wx-bg-partly{ background:radial-gradient(120% 90% at 20% 10%, #56a7e6 0%, #2b5f9e 50%, #13294d 100%); }
.wx-bg-cloud, .wx-bg-fog{ background:radial-gradient(120% 90% at 20% 10%, #6f8499 0%, #3d4c5c 55%, #1b232c 100%); }
.wx-bg-rain, .wx-bg-storm{ background:radial-gradient(120% 90% at 20% 10%, #4f6a8f 0%, #283a57 55%, #0f1729 100%); }
.wx-bg-snow{ background:radial-gradient(120% 90% at 20% 10%, #9bb8d6 0%, #5c7a9c 55%, #243449 100%); }
.fr-wx::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%); transform:translateX(-120%); animation:wxShine 4s ease-in-out 1s infinite; }
@keyframes wxShine{ 0%{ transform:translateX(-120%) } 35%,100%{ transform:translateX(120%) } }
.wx-main{ display:flex; align-items:center; gap:12px; }
.wx-info{ min-width:0; }
.wx-reg{ font-size:13px; font-weight:800; opacity:.9; letter-spacing:.02em; }
.wx-temp{ display:flex; align-items:flex-start; line-height:1; margin:2px 0 3px; }
.wx-temp .wx-num{ font-size:46px; font-weight:900; letter-spacing:-.02em; font-variant-numeric:tabular-nums; text-shadow:0 2px 18px rgba(255,255,255,.35); }
.wx-temp span{ font-size:24px; font-weight:800; margin-top:4px; }
.wx-sky{ font-size:13.5px; font-weight:700; opacity:.92; }
.wx-rep{ margin-top:10px; font-size:12px; font-weight:700; padding:7px 10px; border-radius:10px; background:rgba(0,0,0,.22); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.wx-go{ display:inline-block; margin-top:9px; font-size:12px; font-weight:800; opacity:.85; }
/* 그림 움직임 */
.wx-ic{ flex:0 0 auto; overflow:visible; filter:drop-shadow(0 4px 12px rgba(0,0,0,.25)); }
.wx-rays{ transform-origin:32px 30px; animation:wxRay 10s linear infinite; }
@keyframes wxRay{ to{ transform:rotate(360deg); } }
.wx-sun{ animation:wxPulse 3s ease-in-out infinite; transform-origin:32px 30px; }
@keyframes wxPulse{ 50%{ transform:scale(1.06); } }
.wx-cloud{ animation:wxDrift 5s ease-in-out infinite; }
@keyframes wxDrift{ 50%{ translate:3px 0; } }
.wx-drops line{ animation:wxDrop .9s linear infinite; } .wx-drops line:nth-child(2){ animation-delay:.3s } .wx-drops line:nth-child(3){ animation-delay:.6s }
@keyframes wxDrop{ 0%{ transform:translateY(-6px); opacity:0 } 30%{ opacity:1 } 100%{ transform:translateY(8px); opacity:0 } }
.wx-flakes circle{ animation:wxFlake 2.2s linear infinite; } .wx-flakes circle:nth-child(2){ animation-delay:.7s } .wx-flakes circle:nth-child(3){ animation-delay:1.4s }
@keyframes wxFlake{ 0%{ transform:translate(0,-6px); opacity:0 } 30%{ opacity:1 } 100%{ transform:translate(3px,10px); opacity:0 } }
.wx-bolt{ animation:wxBolt 2.4s infinite; } @keyframes wxBolt{ 0%,86%,100%{ opacity:0 } 88%,92%{ opacity:1 } 90%{ opacity:.3 } }
.wx-fog line{ animation:wxFog 3s ease-in-out infinite; } .wx-fog line:nth-child(2){ animation-delay:.5s } @keyframes wxFog{ 50%{ transform:translateX(4px); opacity:.5 } }
/* 예보 */
.fr-wx-fc{ background:linear-gradient(160deg, rgba(20,42,72,.95), rgba(8,16,30,.97)); }
.wx-h{ display:flex; align-items:baseline; gap:8px; margin-bottom:6px; } .wx-lbl{ font-size:11px; font-weight:800; opacity:.7; letter-spacing:.14em; }
.wx-row{ display:grid; grid-template-columns:62px 30px 1fr auto 52px; align-items:center; gap:6px; padding:6px 0; border-top:1px solid rgba(255,255,255,.08); font-size:13px;
  opacity:0; animation:wxRow .45s ease forwards; animation-delay:calc(var(--i) * 80ms + .15s); }
@keyframes wxRow{ from{ opacity:0; transform:translateX(-10px) } to{ opacity:1; transform:none } }
.wx-row .wx-d{ font-weight:800; } .wx-row .wx-sky{ font-size:12.5px; opacity:.85; }
.wx-row .wx-t b{ font-weight:900; } .wx-row .wx-t i{ font-style:normal; opacity:.6; margin-left:5px; }
.wx-row .wx-pop{ font-size:12px; color:#8fd8ff; font-weight:800; text-align:right; }
@media (prefers-reduced-motion: reduce){ .fr-wx, .fr-wx *, .fr-wx::after{ animation:none !important; opacity:1; } }

/* ══════════ 💥 모든 요소 등장·반응 연출(26.9.22 「모든 요소를 동적 미친 화려한 액션으로」) ══════════ */
.fr-ripple{ position:absolute; border-radius:50%; pointer-events:none; z-index:5; background:radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(127,240,255,.35) 35%, transparent 70%);
  transform:scale(0); opacity:1; animation:frRipple .65s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes frRipple{ to{ transform:scale(1); opacity:0; } }
/* 버튼들 — 스프링 등장 + 차례로 + 광택 */
.fr-acts > .fr-chip{ position:relative; overflow:hidden; animation:frChipIn .55s cubic-bezier(.2,1.6,.4,1) both; }
.fr-acts > .fr-chip:nth-child(2){ animation-delay:.08s } .fr-acts > .fr-chip:nth-child(3){ animation-delay:.16s } .fr-acts > .fr-chip:nth-child(4){ animation-delay:.24s } .fr-acts > .fr-chip:nth-child(5){ animation-delay:.32s }
@keyframes frChipIn{ from{ opacity:0; transform:translateY(10px) scale(.7); } }
.fr-acts > .fr-chip::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
  transform:translateX(-130%); animation:frChipShine 3.6s ease-in-out 1.2s infinite; }
@keyframes frChipShine{ 0%{ transform:translateX(-130%) } 30%,100%{ transform:translateX(130%) } }
.fr-chip-cta{ animation:frChipIn .55s cubic-bezier(.2,1.6,.4,1) both, frCtaBreath 2.2s ease-in-out 1s infinite !important; }
@keyframes frCtaBreath{ 50%{ box-shadow:0 0 22px rgba(95,216,255,.55), 0 0 0 1px rgba(127,240,255,.6); } }
/* 확인 카드 — 날아 들어오고 테두리에 빛이 흐른다 */
@property --fr-cf-a { syntax:"<angle>"; initial-value:0deg; inherits:false; }
.fr-confirm{ position:relative; isolation:isolate; animation:frCfIn .6s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes frCfIn{ from{ opacity:0; transform:translateY(14px) scale(.9) rotate(-1.5deg); } }
.fr-confirm::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1.5px; z-index:-1; pointer-events:none;
  background:conic-gradient(from var(--fr-cf-a), rgba(124,140,255,.25), #7ff0ff, #b28cff, rgba(124,140,255,.25) 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:frCfRun 2.6s linear infinite; }
@keyframes frCfRun{ to{ --fr-cf-a:360deg; } }
.fr-confirm.fr-done::before{ animation:none; opacity:.25; }
.fr-confirm .fr-cf-yes:not(:disabled){ animation:frCtaBreath 2s ease-in-out .6s infinite; }
/* 글 선택지(카드 없는 다지선다) — 번호 배지가 튀어 들어온다 */
.fr-choices .fr-choice{ animation:frChipIn .5s cubic-bezier(.2,1.6,.4,1) both !important; }
/* 위기 카드는 차분하게 — 연출 없음 */
.fr-crisis, .fr-crisis *{ animation:none !important; }
@media (prefers-reduced-motion: reduce){ .fr-acts > .fr-chip, .fr-acts > .fr-chip::after, .fr-confirm, .fr-confirm::before, .fr-ripple, .fr-chip-cta{ animation:none !important; } }

/* 🌙 밤 날씨 카드 */
.fr-wx.wx-night.wx-bg-sun, .fr-wx.wx-night.wx-bg-partly{ background:radial-gradient(120% 90% at 20% 10%, #2a3f7a 0%, #141f45 50%, #060a1c 100%); }
.wx-moon{ animation:wxPulse 4s ease-in-out infinite; transform-origin:32px 30px; filter:drop-shadow(0 0 8px rgba(255,248,200,.5)); }
.wx-stars circle{ animation:wxTw 1.8s ease-in-out infinite; } .wx-stars circle:nth-child(2){ animation-delay:.6s } .wx-stars circle:nth-child(3){ animation-delay:1.2s }
@keyframes wxTw{ 50%{ opacity:.2; transform:scale(.6); } }

/* ══════════ 🧭 갈비스는 화면에 하나만 + 오브↔아일랜드 변신(26.9.22 머티리얼 컨테이너 변환) ══════════ */
body.fr-sf-island #frOrb, body.fr-sf-island #frMini, body.fr-sf-island #frMiniSay,
body.fr-sf-sheet #frOrb, body.fr-sf-sheet #frMini, body.fr-sf-sheet #frMiniSay, body.fr-sf-sheet #frAssist:not(.fri-out),
body.fr-sf-mini #frOrb, body.fr-sf-mini #frAssist,
body.fr-sf-orb #frAssist:not(.fri-out), body.fr-sf-orb #frMini, body.fr-sf-orb #frMiniSay{ display:none !important; }
/* 오브 자리에서 자라나 캡슐이 된다 */
#frAssist.fri.on{ animation:friMorphIn .6s cubic-bezier(.2,1.2,.3,1) both !important; }
@keyframes friMorphIn{ 0%{ opacity:.2; transform:translateX(-50%) translate(var(--fx,40vw), var(--fy,0px)) scale(.18); border-radius:50%; }
  55%{ opacity:1; border-radius:22px; } 100%{ opacity:1; transform:translateX(-50%); } }
#frAssist.fri.fri-out{ display:flex !important; pointer-events:none; animation:friMorphOut .38s cubic-bezier(.5,0,.8,.3) both !important; }
@keyframes friMorphOut{ to{ opacity:0; transform:translateX(-50%) translate(var(--fx,40vw), var(--fy,0px)) scale(.18); border-radius:50%; } }
/* 접힌 채 새 답 — 새 소식 점 */
#frAssist.fri-unread:not(.fri-open) .fri-cap::after{ content:""; position:absolute; right:14px; top:50%; width:9px; height:9px; margin-top:-4.5px; border-radius:50%;
  background:#3fe0ff; box-shadow:0 0 0 0 rgba(63,224,255,.7); animation:friDot 1.4s ease-out infinite; }
#frAssist .fri-cap{ position:relative; }
@keyframes friDot{ to{ box-shadow:0 0 0 10px rgba(63,224,255,0); } }
@media(min-width:1100px){ #frAssist.fri.on{ animation:none !important; } }

/* ══════════ 🫧 캡슐 생애주기 — 끌기·옆 붙기·숨기기·닫기 과녁(26.9.22) ══════════ */
#frAssist.fri.fri-free{ left:0; top:0; bottom:auto !important; transform:none !important; animation:none !important; transition:left .42s cubic-bezier(.3,1.3,.5,1), top .42s cubic-bezier(.3,1.3,.5,1); }
#frAssist.fri.fri-drag{ transition:none !important; cursor:grabbing; box-shadow:0 18px 44px rgba(0,0,0,.6), 0 0 26px rgba(63,224,255,.4) !important; }
#frAssist.fri.fri-drag .fri-cap{ cursor:grabbing; }
#frAssist .fri-cap{ touch-action:none; }
/* 숨김 — 얇은 손잡이만 */
#frAssist.fri.fri-stash{ opacity:.92; }
#frAssist.fri.fri-stash::after{ content:""; position:absolute; top:50%; width:4px; height:26px; margin-top:-13px; border-radius:3px; background:#7ff0ff; box-shadow:0 0 10px #3fe0ff; left:10px; }
#frAssist.fri.fri-stash.fri-stash-left::after{ left:auto; right:10px; }
/* 닫기 과녁 */
#frDismiss{ position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 30px); z-index:10070; width:64px; height:64px; margin-left:-32px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; color:#fff; font-size:10.5px; font-weight:800;
  background:rgba(20,24,32,.85); box-shadow:0 0 0 1.5px rgba(255,255,255,.25), 0 10px 26px rgba(0,0,0,.5);
  transform:translateY(90px) scale(.6); opacity:0; transition:transform .3s cubic-bezier(.2,1.4,.4,1), opacity .2s, background .2s; pointer-events:none; }
#frDismiss svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; }
#frDismiss.on{ transform:none; opacity:1; }
#frDismiss.hot{ transform:scale(1.25); background:rgba(255,72,96,.92); box-shadow:0 0 0 3px rgba(255,255,255,.35), 0 0 30px rgba(255,72,96,.6); }
#frAssist.fri.fri-doomed{ transform:scale(.8) !important; opacity:.85; }
#frAssist.fri.fri-pop-out{ animation:friPopOut .32s ease-in forwards !important; }
@keyframes friPopOut{ 40%{ transform:scale(1.15); opacity:1; } 100%{ transform:scale(.1); opacity:0; } }

/* 🔁 콘텐츠를 떠난 뒤의 아일랜드 캡슐 — 「대화로 돌아가기」(26.9.22) */
#frAssist.fri-away:not(.fri-open) .fri-cap{ box-shadow:0 0 0 1px rgba(216,180,106,.55), 0 8px 28px rgba(0,0,0,.45); }
#frAssist.fri-away:not(.fri-open) .fri-tick{ color:#f1d9a0; font-weight:800; }
#frAssist.fri-away:not(.fri-open) .fri-tick::after{ content:" ↩"; opacity:.85; }

/* ══════════ 💹 시세·환율·실거래가 결과 카드(26.9.22) ══════════ */
.fr-qt{ position:relative; width:min(100%,310px); padding:14px 16px 12px; border-radius:20px; overflow:hidden; color:#fff; isolation:isolate;
  background:radial-gradient(120% 100% at 0% 0%, rgba(90,110,255,.35), transparent 55%), linear-gradient(160deg, #141a2e, #0a0e19 70%);
  box-shadow:0 14px 34px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.09) inset; animation:qtIn .65s cubic-bezier(.2,1.3,.4,1) both; margin:4px 0; }
.fr-qt.qt-up{ background:radial-gradient(120% 100% at 0% 0%, rgba(255,70,90,.32), transparent 55%), linear-gradient(160deg, #1d1420, #0d0a12 70%); }
.fr-qt.qt-down{ background:radial-gradient(120% 100% at 0% 0%, rgba(60,140,255,.34), transparent 55%), linear-gradient(160deg, #111a2c, #090d18 70%); }
.fr-qt::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:2; background:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.16) 50%, transparent 65%); transform:translateX(-120%); animation:wxShine 4.5s ease-in-out .8s infinite; }
@keyframes qtIn{ from{ opacity:0; transform:translateY(18px) scale(.92); } }
.qt-h{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:800; }
.qt-badge{ font-size:10.5px; font-weight:900; letter-spacing:.04em; padding:3px 7px; border-radius:7px; background:rgba(255,255,255,.12); color:#cfd7ff; }
.qt-t{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qt-live{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:800; color:#9fffcf; }
.qt-live i{ width:6px; height:6px; border-radius:50%; background:#3dffa0; box-shadow:0 0 0 0 rgba(61,255,160,.7); animation:qtLive 1.4s ease-out infinite; }
@keyframes qtLive{ to{ box-shadow:0 0 0 8px rgba(61,255,160,0); } }
.qt-big{ display:flex; align-items:baseline; gap:3px; margin:8px 0 2px; }
.qt-num{ font-size:34px; font-weight:900; letter-spacing:-.02em; font-variant-numeric:tabular-nums; text-shadow:0 2px 18px rgba(255,255,255,.18); }
.qt-unit{ font-size:15px; font-weight:800; opacity:.75; }
.qt-chg{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:900; padding:4px 10px; border-radius:999px; font-variant-numeric:tabular-nums; animation:qtPop .5s .9s cubic-bezier(.2,1.6,.4,1) both; }
.qt-up .qt-chg{ color:#ff6b7a; background:rgba(255,70,90,.14); }
.qt-down .qt-chg{ color:#6aa8ff; background:rgba(60,140,255,.15); }
.qt-flat .qt-chg{ color:#c9cfdb; background:rgba(255,255,255,.08); }
.qt-arrow{ display:inline-block; animation:qtBob 1.6s ease-in-out 1.4s infinite; }
.qt-down .qt-arrow{ animation-name:qtBobD; }
@keyframes qtPop{ from{ opacity:0; transform:scale(.6); } }
@keyframes qtBob{ 50%{ transform:translateY(-2px); } }
@keyframes qtBobD{ 50%{ transform:translateY(2px); } }
.qt-wave{ position:absolute; left:0; right:0; bottom:22px; width:100%; height:40px; z-index:-1; opacity:.5; }
.qt-wave path{ fill:none; stroke-width:2.2; stroke-linecap:round; stroke-dasharray:420; stroke-dashoffset:420; animation:qtDraw 1.6s .3s ease-out forwards; stroke:#8fa2ff; }
.qt-up .qt-wave path{ stroke:#ff5d6e; } .qt-down .qt-wave path{ stroke:#4c95ff; }
@keyframes qtDraw{ to{ stroke-dashoffset:0; } }
.qt-src{ margin-top:10px; font-size:11px; font-weight:600; color:rgba(255,255,255,.5); }
.qt-fx .qt-num{ font-size:32px; }
/* 아파트 실거래 */
.qt-apt .qt-h{ font-size:14px; }
.qt-ic{ width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:linear-gradient(145deg,#ffb347,#ff7a3d); box-shadow:0 4px 12px rgba(255,122,61,.4); }
.qt-ic svg{ width:16px; height:16px; fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.qt-cnt{ font-size:11px; font-weight:800; color:rgba(255,255,255,.55); }
.qt-rows{ margin-top:10px; display:flex; flex-direction:column; gap:7px; }
.qt-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 11px; border-radius:13px; background:rgba(255,255,255,.06);
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset; animation:qtRow .5s cubic-bezier(.2,1.2,.4,1) both; animation-delay:calc(var(--i) * 140ms + .25s); }
@keyframes qtRow{ from{ opacity:0; transform:translateX(-18px); } }
.qt-rl{ min-width:0; display:flex; flex-direction:column; }
.qt-apt{ font-size:13.5px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qt-meta{ font-size:11px; color:rgba(255,255,255,.55); margin-top:2px; }
.qt-rr{ text-align:right; flex:none; display:flex; flex-direction:column; }
.qt-won{ font-size:15px; font-weight:900; color:#ffcf7a; font-variant-numeric:tabular-nums; }
.qt-date{ font-size:10.5px; color:rgba(255,255,255,.45); margin-top:2px; }
@media (prefers-reduced-motion: reduce){ .fr-qt, .fr-qt *, .fr-qt::after{ animation:none !important; opacity:1; stroke-dashoffset:0; } }

/* ✈️ 항공권 최저가 카드 */
.fr-qt.qt-flight{ background:radial-gradient(120% 100% at 0% 0%, rgba(60,190,255,.34), transparent 55%), linear-gradient(160deg, #0f1c2e, #081019 70%); }
.qt-ic-fl{ background:linear-gradient(145deg,#4fd1ff,#3a7bff) !important; box-shadow:0 4px 12px rgba(58,123,255,.45) !important; animation:qtFly 2.4s ease-in-out infinite; }
@keyframes qtFly{ 50%{ transform:translate(2px,-2px) rotate(-4deg); } }
.qt-from{ font-size:12px; font-weight:800; color:#8fe6ff; margin-right:4px; align-self:center; }
.qt-flight .qt-num{ color:#fff; }
.qt-frow{ width:100%; border:0; color:inherit; text-align:left; cursor:pointer; font:inherit; -webkit-tap-highlight-color:transparent; }
.qt-frow:active{ transform:scale(.98); }
.qt-logo{ width:30px; height:30px; border-radius:9px; background:#fff; object-fit:contain; flex:none; padding:2px; }
.qt-frow .qt-rl{ flex:1; }
.qt-flight .qt-won{ color:#8fe6ff; }
.qt-flight .qt-date{ color:#8fe6ff; opacity:.8; }

/* 🗞 뉴스 전용 카드(26.9.22) */
.fr-news{ position:relative; width:min(100%,330px); border-radius:20px; overflow:hidden; color:#fff; isolation:isolate; margin:4px 0;
  background:radial-gradient(130% 90% at 100% 0%, rgba(255,60,80,.22), transparent 55%), linear-gradient(165deg,#17151f,#0b0a10 70%);
  box-shadow:0 14px 34px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.09) inset; animation:qtIn .65s cubic-bezier(.2,1.3,.4,1) both; }
.fr-news::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:3; background:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.12) 50%, transparent 65%); transform:translateX(-120%); animation:wxShine 5s ease-in-out 1.2s infinite; }
.nw-h{ display:flex; align-items:center; gap:8px; padding:12px 14px 8px; }
.nw-logo{ font-size:13px; font-weight:900; letter-spacing:-.01em; background:linear-gradient(90deg,#fff,#ffb3bd); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nw-live{ display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:900; letter-spacing:.06em; color:#ff8594; padding:2px 7px; border-radius:6px; background:rgba(255,60,80,.14); }
.nw-live i{ width:6px; height:6px; border-radius:50%; background:#ff4b5f; box-shadow:0 0 0 0 rgba(255,75,95,.7); animation:nwLive 1.3s ease-out infinite; }
@keyframes nwLive{ to{ box-shadow:0 0 0 8px rgba(255,75,95,0); } }
.nw-when{ margin-left:auto; font-size:10.5px; font-weight:700; color:rgba(255,255,255,.45); }
.nw-list{ display:flex; flex-direction:column; }
.nw-hero{ all:unset; cursor:pointer; display:block; position:relative; margin:0 10px; border-radius:15px; overflow:hidden; background:#000; box-shadow:0 0 0 1px rgba(255,255,255,.07) inset; }
.nw-img{ position:relative; height:150px; overflow:hidden; }
.nw-img i{ position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.02); animation:nwZoom 12s ease-in-out infinite alternate; }
.nw-img::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(8,8,12,.92) 100%); }
@keyframes nwZoom{ to{ transform:scale(1.14) translate(-2%,-2%); } }
.nw-noimg .nw-img{ height:34px; background:linear-gradient(120deg,#3a1d2a,#1a1530); }
.nw-body{ position:relative; margin-top:-58px; padding:0 12px 12px; z-index:1; }
.nw-noimg .nw-body{ margin-top:-20px; }
.nw-cat{ display:inline-block; font-size:10px; font-weight:900; padding:3px 8px; border-radius:6px; background:#ff4b5f; color:#fff; box-shadow:0 4px 12px rgba(255,75,95,.45); animation:qtPop .5s .5s cubic-bezier(.2,1.6,.4,1) both; }
.nw-t{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:6px; font-size:16px; line-height:1.3; font-weight:900; letter-spacing:-.02em; text-shadow:0 2px 10px rgba(0,0,0,.6); }
.nw-s{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:6px 0 0; font-size:12.5px; line-height:1.45; color:rgba(255,255,255,.72); animation:nwFade .6s .45s both; }
.nw-meta{ display:block; margin-top:7px; font-size:10.5px; font-weight:700; color:rgba(255,255,255,.45); }
@keyframes nwFade{ from{ opacity:0; transform:translateY(6px); } }
.nw-row{ all:unset; cursor:pointer; display:flex; align-items:center; gap:10px; margin:0 10px; padding:10px 4px; border-bottom:1px solid rgba(255,255,255,.07);
  animation:qtRow .5s cubic-bezier(.2,1.2,.4,1) both; animation-delay:calc(var(--i) * 150ms + .55s); }
.nw-row:last-child{ border-bottom:0; }
.nw-row:active, .nw-hero:active{ transform:scale(.98); }
.nw-no{ flex:none; width:22px; height:22px; border-radius:7px; display:grid; place-items:center; font-size:11.5px; font-weight:900; color:#ffb3bd; background:rgba(255,75,95,.13); }
.nw-rt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.nw-rt b{ font-size:13.5px; font-weight:800; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nw-rt span{ font-size:10.5px; color:rgba(255,255,255,.45); font-weight:600; }
.nw-th{ flex:none; width:54px; height:54px; border-radius:11px; background-size:cover; background-position:center; box-shadow:0 0 0 1px rgba(255,255,255,.08) inset; }
.nw-f{ padding:8px 14px 12px; font-size:10.5px; font-weight:600; color:rgba(255,255,255,.38); }
@media (prefers-reduced-motion: reduce){ .fr-news, .fr-news *, .fr-news::after{ animation:none !important; opacity:1; } }