/* ============================================================
   폰글래스(Phone Glass) — 다크 + 네온 테크 톤
   ============================================================ */
:root{
  --bg:#070b16; --bg2:#0d1424; --card:#121a30; --card2:#16203a;
  --ink:#eaf0ff; --sub:#94a3c8; --line:#243151;
  --acc:#22d3ee;        /* 시안 네온 */
  --acc2:#a855f7;       /* 퍼플 네온 */
  --good:#34d399; --warn:#fbbf24; --danger:#fb7185;
  --grad:linear-gradient(135deg,#22d3ee 0%,#a855f7 100%);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:'Pretendard','Apple SD Gothic Neo',system-ui,sans-serif;
  background:radial-gradient(900px 600px at 80% -10%,#16213f 0%,var(--bg) 55%);
  color:var(--ink); overscroll-behavior:none;
}
#app{
  display:flex; flex-direction:column; height:100dvh;
  max-width:760px; margin:0 auto; background:var(--bg);
  position:relative; overflow:hidden;
}

/* ── 헤더 ── */
header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--line);
  background:rgba(13,20,36,.85); backdrop-filter:blur(12px); flex-shrink:0;
}
.logo{display:flex; align-items:center; gap:10px}
.logo .glyph{
  width:38px; height:38px; border-radius:11px; background:var(--grad);
  display:flex; align-items:center; justify-content:center; font-size:20px;
  box-shadow:0 0 18px rgba(34,211,238,.45);
}
.logo .txt b{font-size:16px; letter-spacing:.3px}
.logo .txt small{display:block; font-size:10.5px; color:var(--sub); letter-spacing:1px}
.head-right{display:flex; align-items:center; gap:10px}
.tts-wrap{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--sub)}

/* PWA 설치 버튼/배너/모달 */
.install-btn{
  background:var(--grad); color:#04121a; border:none; font-weight:800;
  font-size:12px; padding:8px 12px; border-radius:9px; cursor:pointer;
  box-shadow:0 0 14px rgba(34,211,238,.4); white-space:nowrap;
}
.install-btn:active{transform:scale(.96)}
.install-banner{
  margin:0 0 12px; padding:14px 16px; border-radius:14px;
  background:linear-gradient(135deg, rgba(34,211,238,.12), rgba(168,85,247,.12));
  border:1px solid rgba(34,211,238,.4);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.install-banner .ib-text{display:flex; flex-direction:column; gap:3px}
.install-banner .ib-text b{font-size:14px; color:var(--ink)}
.install-banner .ib-text span{font-size:12px; color:var(--sub); line-height:1.5}
.install-banner .ib-actions{display:flex; gap:8px; flex-shrink:0}
.install-banner .btn{padding:8px 14px; font-size:13px}

.install-guide{
  position:fixed; inset:0; z-index:1000; background:rgba(3,6,14,.78);
  display:flex; align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(4px);
}
.install-guide .ig-card{
  width:100%; max-width:360px; background:var(--card); border:1px solid var(--line);
  border-radius:18px; padding:20px 22px; box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.ig-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.ig-head b{font-size:17px}
.ig-x{background:none; border:none; color:var(--sub); font-size:18px; cursor:pointer}
.ig-lead{font-size:13.5px; color:var(--acc); font-weight:700; margin-bottom:10px}
.ig-steps{margin:0 0 6px; padding-left:20px; display:flex; flex-direction:column; gap:9px}
.ig-steps li{font-size:13.5px; line-height:1.6; color:var(--ink)}
.ig-steps b{color:var(--acc)}
.ig-ic{display:inline-block; padding:1px 6px; border:1px solid var(--line); border-radius:6px; font-size:12px}
.ig-note{margin-top:12px; padding:10px 12px; border-radius:10px; background:var(--card2); border:1px solid var(--line); font-size:12px; color:var(--sub); line-height:1.6}
.ig-ok{font-size:14px; line-height:1.7; text-align:center; padding:10px 0}
.switch{position:relative; width:38px; height:21px}
.switch input{opacity:0; width:0; height:0}
.slider{
  position:absolute; inset:0; background:var(--line); border-radius:20px; transition:.25s; cursor:pointer;
}
.slider::before{
  content:''; position:absolute; width:15px; height:15px; left:3px; top:3px;
  background:#fff; border-radius:50%; transition:.25s;
}
.switch input:checked + .slider{background:var(--acc)}
.switch input:checked + .slider::before{transform:translateX(17px)}

/* ── 본문 ── */
main{flex:1; overflow:hidden; position:relative}
.tab-pane{display:none; height:100%; flex-direction:column; padding:16px}
.tab-pane.active{display:flex}
.pane-title{font-size:13px; color:var(--acc); font-weight:700; letter-spacing:1px; margin-bottom:4px}
.pane-desc{font-size:12.5px; color:var(--sub); margin-bottom:12px}

/* ── 카메라 ── */
.cam-stage{
  position:relative; width:100%; aspect-ratio:4/3; background:#000;
  border:1px solid var(--line); border-radius:16px; overflow:hidden; flex-shrink:0;
}
.cam-stage video{width:100%; height:100%; object-fit:cover}
#camPlaceholder{
  position:absolute; inset:0; display:flex; flex-direction:column; gap:8px;
  align-items:center; justify-content:center; color:var(--sub); font-size:13px;
}
#camPlaceholder .big{font-size:46px}

/* 카메라 도움말 패널 */
.cam-help{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:22px 20px; max-width:340px;
}
.cam-help .big{font-size:50px; margin-bottom:6px}
.cam-help-title{font-size:16px; font-weight:800; color:var(--ink); margin-bottom:10px}
.cam-help-body{font-size:13px; line-height:1.7; color:var(--sub)}
.cam-help-body b{color:var(--acc)}
.cam-help .big-cta{margin-top:16px; padding:14px 18px; font-size:15px; font-weight:800; border-radius:12px; width:100%; max-width:300px}
.cam-help-sub{font-size:11.5px; color:var(--sub); line-height:1.6; margin-top:10px; max-width:300px}
.cam-help-sub b{color:var(--acc)}
.cam-help .small-alt{margin-top:14px; font-size:12px; padding:7px 12px; opacity:.75}

/* 카메라 '차단됨' → 한 곳만 콕 집어 안내 */
.cam-blocked{max-width:360px}
.cb-point{
  margin:14px 0 4px; padding:11px 14px; border-radius:12px;
  background:rgba(168,85,247,.12); border:1px solid rgba(168,85,247,.4);
  font-size:13.5px; line-height:1.6; color:var(--ink);
}
.cb-point b{color:var(--acc2)}
.cb-steps{
  text-align:left; margin:12px 0 4px; padding-left:22px;
  font-size:13px; line-height:1.95; color:var(--sub);
}
.cb-steps li{margin-bottom:3px}
.cb-steps b{color:var(--acc)}

/* 진단(디버그) 로그 박스 */
.cam-debug{
  display:none; margin:8px 0 0; padding:10px 12px; border-radius:10px;
  background:#000; border:1px solid var(--acc2);
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11px; line-height:1.55;
  color:#8affc1; max-height:200px; overflow:auto; word-break:break-all;
}
.cam-debug div{border-bottom:1px solid rgba(255,255,255,.06); padding:2px 0}

/* 카메라 상태 안내줄 */
.cam-status{
  margin:8px 0 0; padding:9px 12px; border-radius:10px;
  background:rgba(34,211,238,.10); border:1px solid rgba(34,211,238,.35);
  color:var(--acc); font-size:12.5px; text-align:center; line-height:1.5;
}

.cam-controls{display:flex; gap:8px; margin:10px 0; flex-wrap:wrap}

/* ── 버튼 ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:11px 16px; border-radius:12px; border:1px solid var(--line);
  background:var(--card); color:var(--ink); font-size:13.5px; font-weight:600;
  cursor:pointer; transition:.18s; font-family:inherit;
}
.btn:hover{border-color:var(--acc); color:var(--acc)}
.btn:active{transform:scale(.96)}
.btn.primary{background:var(--grad); border:none; color:#04121a; box-shadow:0 4px 16px rgba(34,211,238,.3)}
.btn.primary:hover{color:#04121a; filter:brightness(1.08)}
.btn.ghost{background:transparent}
.btn.mic{width:46px; height:46px; padding:0; border-radius:50%; flex-shrink:0}
.btn.mic.listening{background:var(--danger); border-color:var(--danger); color:#fff; animation:pulse 1.1s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(251,113,133,.5)}50%{box-shadow:0 0 0 10px rgba(251,113,133,0)}}

/* ── 채팅 로그 ── */
.chat-log{flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:6px 2px 10px; margin-top:8px}
.chat-msg{display:flex; flex-direction:column; max-width:88%}
.chat-msg.mine{align-self:flex-end; align-items:flex-end}
.chat-msg.ai{align-self:flex-start; align-items:flex-start}
.bubble{
  padding:11px 15px; border-radius:16px; font-size:14px; line-height:1.6; word-break:break-word; white-space:pre-wrap;
}
.chat-msg.mine .bubble{background:var(--grad); color:#04121a; border-bottom-right-radius:4px; font-weight:500}
.chat-msg.ai .bubble{background:var(--card2); border:1px solid var(--line); border-bottom-left-radius:4px}
.src-tag{font-size:10px; color:var(--sub); margin-top:3px}
.empty-hint{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--sub); font-size:13px; gap:10px; text-align:center;
}
.empty-hint .big{font-size:44px}

/* ── 입력 행 ── */
.input-row{display:flex; gap:8px; align-items:center; margin-top:8px; flex-shrink:0}
.input-row input,.input-row textarea,.input-row select{
  flex:1; padding:12px 14px; border-radius:12px; border:1px solid var(--line);
  background:var(--card); color:var(--ink); font-size:14px; font-family:inherit; outline:none;
}
.input-row input:focus{border-color:var(--acc)}
.input-row select{flex:none; width:auto}

/* 로딩 */
.loading{display:none; align-items:center; gap:8px; color:var(--acc); font-size:12.5px; padding:6px 2px}
.dots{display:flex; gap:4px}
.dots span{width:6px; height:6px; background:var(--acc); border-radius:50%; animation:b 1.2s infinite}
.dots span:nth-child(2){animation-delay:.2s}
.dots span:nth-child(3){animation-delay:.4s}
@keyframes b{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}

/* 검색 결과 카드 */
.search-items{display:flex; flex-direction:column; gap:6px; margin-top:8px; width:100%}
.search-item{
  display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:10px;
  background:var(--card); border:1px solid var(--line); text-decoration:none; color:var(--ink); font-size:12.5px;
}
.search-item:hover{border-color:var(--acc)}
.si-type{font-size:10px; color:var(--acc); background:rgba(34,211,238,.12); padding:2px 7px; border-radius:8px; flex-shrink:0}
.si-title{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* 모드 칩 */
.mode-chips{display:flex; gap:8px; margin:4px 0 8px; flex-wrap:wrap}
.chip{padding:8px 14px; border-radius:20px; border:1px solid var(--line); background:var(--card); font-size:12.5px; cursor:pointer; transition:.15s}
.chip:hover,.chip.active{border-color:var(--acc); color:var(--acc); background:rgba(34,211,238,.1)}

/* ── 하단 네비 ── */
nav.bottom{
  display:flex; border-top:1px solid var(--line); background:rgba(13,20,36,.92);
  backdrop-filter:blur(12px); flex-shrink:0;
  padding-bottom:env(safe-area-inset-bottom);
}
.nav-btn{
  flex:1; background:none; border:none; color:var(--sub); padding:10px 4px 12px;
  font-size:10.5px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px;
  font-family:inherit; transition:.15s;
}
.nav-btn .ic{font-size:20px}
.nav-btn.active{color:var(--acc)}
.nav-btn.active .ic{filter:drop-shadow(0 0 6px rgba(34,211,238,.6))}

/* 토스트 */
#toast{
  position:fixed; bottom:90px; left:50%; transform:translateX(-50%) translateY(20px);
  background:#1f2937; color:#fff; padding:11px 18px; border-radius:20px; font-size:13px;
  opacity:0; transition:.3s; pointer-events:none; z-index:200; max-width:90%; text-align:center;
}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* 안내 배너 */
.dev-banner{
  font-size:11px; color:var(--warn); background:rgba(251,191,36,.08);
  border:1px solid rgba(251,191,36,.25); border-radius:10px; padding:7px 12px; margin-bottom:10px;
}
a.admin-link{color:var(--sub); font-size:11px; text-decoration:none}
a.admin-link:hover{color:var(--acc)}

/* ── 비전 기능 그리드 (SECTION 1: 기능 1~17) ── */
/* 비전 탭은 카메라(4:3)+기능버튼 32개로 내용이 길어 입력창이 화면 밖으로 잘리던 문제 수정.
   탭 자체를 세로 스크롤 가능하게 + 채팅로그 고정높이 + 입력창은 하단에 sticky로 항상 보이게. */
#pane-vision{overflow-y:auto; -webkit-overflow-scrolling:touch}
#pane-vision .chat-log{flex:none; min-height:120px}
#pane-vision .input-row{position:sticky; bottom:0; background:var(--bg); padding:8px 0 2px; z-index:5}
.vision-grid-wrap{margin:10px 0 4px}
.vg-group{margin-bottom:12px}
.vg-title{
  font-size:12px; color:var(--sub); font-weight:700; letter-spacing:.5px;
  margin:0 2px 7px; text-transform:uppercase;
}
.vision-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr));
  gap:8px;
}
.vg-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; padding:11px 5px; min-height:66px;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  color:var(--ink); cursor:pointer; transition:transform .12s, border-color .12s, background .12s;
}
.vg-btn:hover,.vg-btn:active{
  transform:translateY(-2px); border-color:var(--acc);
  background:var(--card2);
}
.vg-ic{font-size:22px; line-height:1}
.vg-lb{font-size:11px; color:var(--sub); font-weight:600; text-align:center; line-height:1.15}
.vg-btn:hover .vg-lb{color:var(--ink)}

/* ===== 오디오 녹음 UI (SECTION 3) ===== */
.audio-recorder{display:flex; flex-direction:column; align-items:center; gap:8px; margin:14px 0 6px}
.rec-btn{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  width:96px; height:96px; border-radius:50%;
  background:var(--card2); border:2px solid var(--line); color:var(--ink);
  cursor:pointer; transition:transform .12s, border-color .12s, background .12s;
}
.rec-btn:hover{border-color:var(--acc)}
.rec-btn:active{transform:scale(.96)}
.rec-btn.recording{
  background:rgba(239,68,68,.15); border-color:#ef4444;
  animation:recpulse 1.2s ease-in-out infinite;
}
@keyframes recpulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.4)}50%{box-shadow:0 0 0 10px rgba(239,68,68,0)}}
.rec-ic{font-size:30px; line-height:1}
.rec-lb{font-size:12px; font-weight:700; color:var(--sub)}
.rec-btn.recording .rec-lb{color:#ef4444}
.rec-timer{font:700 18px/1 monospace; color:#ef4444; letter-spacing:1px}
.rec-mode-hint{font-size:12px; color:var(--sub); text-align:center}
.ag-btn.selected{border-color:var(--acc); background:rgba(168,85,247,.12)}
.ag-btn.selected .vg-lb{color:var(--ink)}

/* ===== 메시지·센서 UI (SECTION 4) ===== */
.msg-textarea{
  width:100%; box-sizing:border-box; margin:8px 0 4px; padding:11px 12px;
  background:var(--card2); border:1px solid var(--line); border-radius:12px;
  color:var(--ink); font:14px/1.5 inherit; resize:vertical; min-height:74px;
}
.msg-textarea:focus{outline:none; border-color:var(--acc)}
.msg-textarea::placeholder{color:var(--sub)}
.sn-btn .vg-ic{font-size:20px}

/* ===== 오토파일럿 UI (AUTOPILOT) ===== */
.auto-hero{display:flex; flex-direction:column; align-items:center; gap:14px; margin:6px 0 14px}
.auto-orb{
  width:74px; height:74px; border-radius:50%; display:grid; place-items:center;
  font-size:34px; background:var(--grad);
  box-shadow:0 0 0 6px rgba(56,224,201,.12), 0 8px 30px rgba(56,224,201,.28);
  animation:autoPulse 2.6s ease-in-out infinite;
}
@keyframes autoPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.auto-examples{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.auto-chip{
  background:var(--card2); border:1px solid var(--line); color:var(--ink);
  padding:8px 12px; border-radius:999px; font-size:12.5px; cursor:pointer;
  transition:border-color .15s, transform .1s;
}
.auto-chip:hover{border-color:var(--acc)}
.auto-chip:active{transform:scale(.96)}
.auto-badge{
  display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap;
  font-size:11.5px; font-weight:600; color:var(--acc-ink, #04121a);
  background:rgba(56,224,201,.14); border:1px solid rgba(56,224,201,.4);
  padding:3px 9px; border-radius:999px; margin-bottom:6px;
}
.auto-cat{opacity:.7; font-weight:500}
/* 오토 배지 안의 아바타(아리) 태그 — 인라인 알약으로 강조(대화 탭과 일관) */
.auto-badge .src-tag{
  margin-top:0; font-size:10.5px; font-weight:700; color:#04121a;
  background:rgba(56,224,201,.55); padding:1px 7px; border-radius:999px;
}
.auto-conf{padding:1px 6px; border-radius:999px; font-weight:600}
.auto-conf.mid{background:rgba(245,200,80,.18); color:#f5c850}
.auto-conf.low{background:rgba(245,140,80,.18); color:#f58c50}

/* ===== 개인 메모리(Memory Graph) UI ===== */
.mem-add{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.mem-sel{flex:0 0 auto;padding:11px 12px;border-radius:12px;border:1px solid var(--line,#2a2f45);background:var(--card,#161b2e);color:var(--fg,#e8ecf5);font-size:14px}
.mem-in{flex:1 1 120px;min-width:120px;padding:11px 14px;border-radius:12px;border:1px solid var(--line,#2a2f45);background:var(--card,#161b2e);color:var(--fg,#e8ecf5);font-size:14px}
.mem-list{display:flex;flex-direction:column;gap:10px}
.mem-item{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:14px;background:var(--card,#161b2e);border:1px solid var(--line,#2a2f45)}
.mem-ic{font-size:22px;flex:0 0 auto;width:30px;text-align:center}
.mem-body{flex:1 1 auto;min-width:0}
.mem-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:15px}
.mem-kind{font-size:11px;padding:2px 8px;border-radius:999px;background:rgba(120,140,255,.16);color:#9db0ff}
.mem-auto{font-size:10px;padding:2px 7px;border-radius:999px;background:rgba(80,210,160,.18);color:#5fe0b0}
.mem-val{margin-top:3px;color:var(--muted,#9aa3bd);font-size:13px;word-break:break-all}
.mem-del{flex:0 0 auto;width:30px;height:30px;border-radius:9px;border:none;background:rgba(255,90,110,.12);color:#ff7088;font-size:14px;cursor:pointer}
.mem-del:hover{background:rgba(255,90,110,.24)}
/* 오토파일럿 배지의 기억 칩 */
.auto-mem{display:inline-block;font-size:11px;padding:2px 8px;margin-left:4px;border-radius:999px;background:rgba(120,140,255,.18);color:#9db0ff}

/* ===== 페르소나(Persona) 선택 바 ===== */
.persona-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:6px 0 14px;padding:8px 10px;border-radius:14px;background:var(--card,#161b2e);border:1px solid var(--line,#2a2f45)}
.persona-bar-label{font-size:12px;color:var(--muted,#9aa3bd);margin-right:4px}
.persona-opt{flex:0 0 auto;padding:7px 13px;border-radius:999px;border:1px solid var(--line,#2a2f45);background:transparent;color:var(--muted,#9aa3bd);font-size:13px;cursor:pointer;transition:all .15s}
.persona-opt:hover{color:var(--fg,#e8ecf5);border-color:#4b5680}
.persona-opt.active{background:linear-gradient(135deg,#6d7bff,#9b6bff);color:#fff;border-color:transparent;font-weight:600}

/* ───────── 플랜/구독 UI (마스터플랜 기둥③: MONETIZATION) ───────── */
.persona-opt.locked{opacity:.6}
.persona-opt.locked::before{content:'🔒 ';font-size:11px}
.plan-bar{display:flex;align-items:center;gap:10px;margin:2px 0 8px}
.plan-badge{padding:5px 12px;border-radius:999px;border:1px solid var(--line,#2a2f45);background:var(--card,#161b2e);color:var(--fg,#e8ecf5);font-size:12px;font-weight:700;cursor:pointer;transition:all .15s}
.plan-badge:hover{border-color:#6d7bff}
.plan-badge.plan-pro{background:linear-gradient(135deg,#ffb547,#ff8a3d);color:#1a1304;border-color:transparent}
.plan-badge.plan-team{background:linear-gradient(135deg,#9b6bff,#6d7bff);color:#fff;border-color:transparent}
.plan-quota{font-size:11px;color:var(--muted,#9aa3bd)}
.auto-upgrade{margin-left:6px;padding:3px 11px;border-radius:999px;border:none;background:linear-gradient(135deg,#ffb547,#ff8a3d);color:#1a1304;font-size:12px;font-weight:700;cursor:pointer}
.auto-upgrade:hover{filter:brightness(1.06)}

/* 요금제 모달 */
.plan-modal{position:fixed;inset:0;z-index:200;display:none;align-items:flex-end;justify-content:center;background:rgba(6,8,18,.62);backdrop-filter:blur(3px)}
.plan-modal.open{display:flex}
.plan-sheet{width:100%;max-width:560px;max-height:90vh;overflow-y:auto;background:var(--bg,#0d1020);border:1px solid var(--line,#2a2f45);border-radius:22px 22px 0 0;padding:18px 16px 26px;animation:planUp .22s ease}
@keyframes planUp{from{transform:translateY(24px);opacity:.4}to{transform:translateY(0);opacity:1}}
@media(min-width:600px){.plan-sheet{border-radius:22px;margin-bottom:auto;margin-top:auto}.plan-modal{align-items:center}}
.plan-sheet-head{display:flex;align-items:center;justify-content:space-between}
.plan-sheet-title{font-size:18px;font-weight:800;color:var(--fg,#e8ecf5)}
.plan-close{background:transparent;border:none;color:var(--muted,#9aa3bd);font-size:18px;cursor:pointer;padding:4px 8px}
.plan-sheet-desc{font-size:13px;color:var(--muted,#9aa3bd);margin:6px 0 14px;line-height:1.5}
.plan-cards{display:flex;flex-direction:column;gap:12px}
.plan-card{position:relative;border:1px solid var(--line,#2a2f45);border-radius:16px;padding:16px 16px 18px;background:var(--card,#161b2e)}
.plan-card.current{border-color:#6d7bff;box-shadow:0 0 0 1px rgba(109,123,255,.4)}
.plan-card-pro{background:linear-gradient(180deg,rgba(255,181,71,.08),var(--card,#161b2e))}
.plan-card-team{background:linear-gradient(180deg,rgba(155,107,255,.08),var(--card,#161b2e))}
.plan-card-icon{font-size:22px}
.plan-card-name{font-size:16px;font-weight:800;color:var(--fg,#e8ecf5);margin-top:2px}
.plan-card-price{font-size:22px;font-weight:800;color:var(--fg,#e8ecf5);margin:4px 0}
.plan-card-pricenote{font-size:12px;font-weight:500;color:var(--muted,#9aa3bd);margin-left:3px}
.plan-card-tagline{font-size:12.5px;color:var(--muted,#9aa3bd);margin-bottom:10px}
.plan-card-perks{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-direction:column;gap:6px}
.plan-card-perks li{font-size:13px;color:var(--fg,#e8ecf5);padding-left:20px;position:relative}
.plan-card-perks li::before{content:'✓';position:absolute;left:0;color:#5fd08a;font-weight:800}
.plan-card-btn{width:100%;padding:11px;border-radius:12px;border:none;background:linear-gradient(135deg,#6d7bff,#9b6bff);color:#fff;font-size:14px;font-weight:700;cursor:pointer}
.plan-card-btn:hover{filter:brightness(1.06)}
.plan-card-btn.current{background:var(--line,#2a2f45);color:var(--muted,#9aa3bd);cursor:default}
.plan-note{font-size:11px;color:var(--muted,#9aa3bd);text-align:center;margin-top:14px}

/* ============================================================
   MOONSHOT M3 — 음성-우선 핸즈프리(글래스) 모드
   ============================================================ */
/* 진입 버튼 */
.hf-launch{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:10px;
  padding:13px 16px;border-radius:14px;border:1px solid var(--line);background:var(--card2);
  color:var(--ink);font-size:14.5px;font-weight:700;cursor:pointer;transition:.15s}
.hf-launch:hover{border-color:var(--acc);box-shadow:0 4px 18px rgba(34,211,238,.18)}
.hf-launch-sub{font-size:11.5px;font-weight:600;color:var(--sub)}

/* 풀스크린 오버레이 */
.hf-overlay{position:fixed;inset:0;z-index:9999;display:none;
  background:radial-gradient(1100px 800px at 50% -10%,#13234a 0%,var(--bg) 60%);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.hf-overlay.show{display:block;animation:hfIn .25s ease}
@keyframes hfIn{from{opacity:0}to{opacity:1}}
body.hf-on{overflow:hidden}

.hf-exit{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);background:rgba(18,26,48,.7);color:var(--ink);font-size:18px;cursor:pointer;z-index:2}
.hf-exit:hover{border-color:var(--danger);color:var(--danger)}

.hf-stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:32px 24px;text-align:center;cursor:pointer;user-select:none}
.hf-icon{font-size:84px;line-height:1;filter:drop-shadow(0 6px 24px rgba(34,211,238,.35));transition:.2s}
.hf-title{font-size:26px;font-weight:800;color:var(--ink);letter-spacing:-.3px}
.hf-status{font-size:15px;font-weight:600;color:var(--acc)}
.hf-speak{max-width:560px;font-size:19px;line-height:1.6;color:var(--ink);font-weight:600;
  min-height:1.6em;word-break:keep-all}
.hf-hint{max-width:520px;font-size:12.5px;color:var(--sub);line-height:1.6;margin-top:4px}

/* 음성 파형(상태에 따라 애니메이션) */
.hf-wave{display:flex;align-items:flex-end;gap:6px;height:34px;margin-top:8px}
.hf-wave span{width:6px;height:8px;border-radius:3px;background:var(--line);transition:.2s}

/* 상태별 색/애니메이션 */
.hf-overlay[data-state="listening"] .hf-icon{animation:hfPulse 1.2s infinite}
.hf-overlay[data-state="listening"] .hf-wave span{background:var(--acc);animation:hfWave 1s infinite ease-in-out}
.hf-overlay[data-state="listening"] .hf-wave span:nth-child(2){animation-delay:.15s}
.hf-overlay[data-state="listening"] .hf-wave span:nth-child(3){animation-delay:.3s}
.hf-overlay[data-state="listening"] .hf-wave span:nth-child(4){animation-delay:.45s}
.hf-overlay[data-state="listening"] .hf-wave span:nth-child(5){animation-delay:.6s}
.hf-overlay[data-state="thinking"] .hf-icon{animation:hfSpin 1.4s linear infinite}
.hf-overlay[data-state="speaking"] .hf-icon{animation:hfBob 1.1s infinite ease-in-out}
.hf-overlay[data-state="speaking"] .hf-wave span{background:var(--acc2)}

@keyframes hfPulse{0%,100%{transform:scale(1);filter:drop-shadow(0 6px 24px rgba(34,211,238,.35))}
  50%{transform:scale(1.08);filter:drop-shadow(0 8px 34px rgba(34,211,238,.6))}}
@keyframes hfWave{0%,100%{height:8px}50%{height:30px}}
@keyframes hfSpin{to{transform:rotate(360deg)}}
@keyframes hfBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ===== 아리 온보딩 시연 (첫 방문) — 비파괴 추가 ===== */
.ari-onb{position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(5,8,18,.72);backdrop-filter:blur(6px);opacity:0;transition:opacity .22s}
.ari-onb.on{opacity:1}
.ari-onb .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.onb-card{position:relative;width:100%;max-width:380px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:30px 24px 20px;box-shadow:0 24px 70px -18px rgba(0,0,0,.7);transform:translateY(12px) scale(.98);transition:.25s}
.ari-onb.on .onb-card{transform:none}
.onb-skip{position:absolute;top:12px;right:14px;background:none;border:none;color:var(--sub);font-size:12.5px;font-weight:700;cursor:pointer;padding:6px 8px}
.onb-skip:hover{color:var(--ink)}
.onb-step{display:none;text-align:center;animation:onbIn .3s ease}
.onb-step.active{display:block}
@keyframes onbIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.onb-ari{font-size:52px;margin-bottom:8px;animation:onbFloat 2.6s ease-in-out infinite}
@keyframes onbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.onb-step h3{font-size:21px;font-weight:800;color:var(--ink);margin:0 0 10px;line-height:1.4}
.onb-step p{font-size:14px;color:var(--sub);line-height:1.65;margin:0 0 20px}
.onb-step b{color:var(--ink)}
.onb-demo{display:flex;flex-direction:column;gap:8px;margin:0 0 20px;text-align:left}
.onb-bubble{max-width:88%;padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:1.5}
.onb-bubble.me{align-self:flex-end;background:var(--grad);color:#04121a;font-weight:600;border-bottom-right-radius:4px}
.onb-bubble.ari{align-self:flex-start;background:var(--card2);border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:4px}
.onb-bubble .ow{display:block;font-size:10.5px;color:var(--acc);font-weight:700;margin-bottom:3px}
.onb-next{width:100%;margin-top:4px}
.onb-try{display:flex;flex-direction:column;gap:9px;margin:0 0 18px}
.onb-trychip{padding:12px 14px;border-radius:13px;border:1px solid var(--line);background:var(--card2);color:var(--ink);font-size:14px;font-weight:600;cursor:pointer;transition:.16s;text-align:left}
.onb-trychip:hover{border-color:var(--acc);transform:translateY(-1px)}
.onb-dots{display:flex;gap:7px;justify-content:center;margin-top:14px}
.onb-dots .od{width:7px;height:7px;border-radius:50%;background:var(--line);transition:.2s}
.onb-dots .od.on{background:var(--acc);width:20px;border-radius:4px}

/* ===== 친구 초대 카드 (요금제 모달) — 성장 C안 — 비파괴 추가 ===== */
.refer-card{margin:4px 0 18px;padding:16px;border-radius:16px;background:linear-gradient(135deg,rgba(34,211,238,.10),rgba(168,85,247,.12));border:1px solid rgba(168,85,247,.32)}
.refer-head{display:flex;gap:12px;align-items:flex-start}
.refer-ic{font-size:30px;line-height:1;flex:0 0 auto}
.refer-head b{font-size:15.5px;color:var(--ink)}
.refer-hi{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:800}
.refer-head p{margin:5px 0 0;font-size:13px;color:var(--sub);line-height:1.55}
.refer-head p b{color:var(--ink)}
.refer-link-row{display:flex;gap:8px;margin-top:14px}
.refer-link{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--ink);font-size:12.5px;font-family:monospace}
.refer-copy{flex:0 0 auto;padding:10px 16px}
.refer-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;flex-wrap:wrap}
.refer-share{background:var(--card2);border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:9px 14px;font-size:13.5px;font-weight:700;cursor:pointer;transition:.16s}
.refer-share:hover{border-color:var(--acc);transform:translateY(-1px)}
.refer-stats{font-size:12px;color:var(--sub)}
.refer-pro{margin-top:12px;padding:10px 12px;border-radius:10px;background:rgba(34,211,238,.10);border:1px solid rgba(34,211,238,.3);font-size:13px;color:var(--ink)}
.refer-pro b{color:var(--acc)}