/* ════════════════════════════════════════════════════════════════════════
   PetCam — "Premium Glassy Dark"
   video-first · frosted glass floating chrome · warm coral · health system
   Type: Bricolage Grotesque (display) · Hanken Grotesk (UI) · JetBrains Mono (metrics)
   ════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  --bg:        #0B0C10;
  --bg-elev:   #15171E;
  --surface:   #1C1F28;
  --surface-2: #242833;
  --glass:        rgba(16, 18, 25, 0.38);
  --glass-solid:  rgba(18, 20, 27, 0.72);
  --glass-stroke: rgba(255, 255, 255, 0.14);
  --glass-hi:     rgba(255, 255, 255, 0.26);

  --primary:   #FF8A4C;   /* warm coral-amber */
  --primary-2: #FF6F3C;
  --primary-press: #F2733A;
  --success:   #34D27B;
  --warn:      #FFC94D;
  --alert:     #FF4D4F;

  --text:       #F4F5F7;
  --muted:      #9AA0AD;
  --faint:      rgba(255, 255, 255, 0.45);

  --r-pill: 999px;
  --r-lg: 26px;
  --r-md: 18px;
  --r-sm: 12px;

  --shadow-card: 0 18px 50px rgba(0, 0, 0, 0.5);
  --shadow-glass: 0 10px 30px rgba(0, 0, 0, 0.45);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
  --font-ui: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-weight: 400;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* atmospheric backdrop — faint coral + teal aurora over near-black */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(60% 50% at 78% -8%, rgba(255, 138, 76, 0.16), transparent 70%),
    radial-gradient(55% 45% at 12% 108%, rgba(52, 210, 123, 0.10), transparent 70%),
    var(--bg);
}
/* fine grain */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─── Type ─────────────────────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--font-display); margin: 0; letter-spacing: -0.02em; }
.mono { font-family: var(--font-mono); }

/* ════════════════ LANDING ════════════════ */
.hero {
  max-width: 460px; margin: 0 auto; padding: 64px 22px 40px;
  min-height: 100dvh; display: flex; flex-direction: column;
}
.hero-mark {
  width: 76px; height: 76px; border-radius: 22px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--primary), var(--primary-2));
  box-shadow: 0 14px 40px rgba(255, 138, 76, 0.42), inset 0 1px 0 rgba(255,255,255,0.35);
  animation: floatIn 0.7s var(--ease) both;
}
.hero-mark svg { width: 44px; height: 44px; }
.hero h1 {
  font-size: 44px; font-weight: 800; line-height: 1.05; margin: 26px 0 0;
  animation: floatIn 0.7s 0.05s var(--ease) both;
}
.hero h1 .accent { color: var(--primary); }
.hero .sub {
  color: var(--muted); font-size: 16px; line-height: 1.55; margin: 14px 0 40px; max-width: 22em;
  animation: floatIn 0.7s 0.12s var(--ease) both;
}
.cards { display: grid; gap: 16px; }
.card {
  position: relative; display: flex; align-items: center; gap: 18px;
  text-decoration: none; color: var(--text);
  background: var(--bg-elev); border: 1px solid var(--glass-stroke);
  border-radius: var(--r-lg); padding: 22px;
  overflow: hidden; transition: transform 0.18s var(--ease), border-color 0.2s, background 0.2s;
  animation: floatIn 0.7s var(--ease) both;
}
.card:nth-child(1) { animation-delay: 0.18s; }
.card:nth-child(2) { animation-delay: 0.26s; }
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 80% at 100% 0%, rgba(255,138,76,0.10), transparent 60%);
  opacity: 0; transition: opacity 0.25s;
}
.card:active { transform: scale(0.98); }
.card:hover { border-color: var(--glass-hi); }
.card:hover::after { opacity: 1; }
.card-emoji {
  flex: none; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--glass-stroke); color: var(--primary);
}
.card-emoji svg { width: 28px; height: 28px; }
.card-view .card-emoji { color: var(--success); }
.card-recent { border-color: rgba(255,138,76,0.45); background: linear-gradient(135deg, rgba(255,138,76,0.12), var(--bg-elev) 62%); }
.card-recent::after { opacity: 0.55; }
.card-recent .card-emoji { color: var(--primary); }
.card-body { display: flex; flex-direction: column; gap: 3px; }
.card-title { font-family: var(--font-display); font-weight: 700; font-size: 19px; }
.card-desc { color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.card-go { margin-left: auto; color: var(--faint); }
.plans-link { display: block; text-align: center; margin-top: auto; padding-top: 32px; color: var(--primary); text-decoration: none; font-size: 14px; font-weight: 600; }
.plans-link:active { opacity: 0.7; }
.foot {
  padding-top: 14px; color: var(--faint); font-size: 12px; text-align: center;
  letter-spacing: 0.01em;
}
.foot b { color: var(--muted); font-weight: 600; }

/* ════════════════ SHARED: top status badge (fixed, glass, health dot) ════════════════ */
.status {
  position: fixed; top: calc(14px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  z-index: 60; display: inline-flex; align-items: center; gap: 8px;
  max-width: calc(100vw - 32px);
  padding: 9px 16px 9px 13px; border-radius: var(--r-pill);
  background: var(--glass); -webkit-backdrop-filter: blur(26px) saturate(165%); backdrop-filter: blur(26px) saturate(165%);
  border: 1px solid var(--glass-stroke); border-top-color: var(--glass-hi);
  box-shadow: var(--shadow-glass);
  font-family: var(--font-ui); font-weight: 600; font-size: 13.5px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.status::before {
  content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--muted);
}
.status.idle::before { background: var(--muted); }
.status.ok::before   { background: var(--success); box-shadow: 0 0 0 0 rgba(52,210,123,0.6); animation: livePulse 1.7s infinite; }
.status.warn::before { background: var(--warn);    animation: blink 1s steps(2,start) infinite; }
.status.err::before  { background: var(--alert); }

/* ─── glass scrims over video ─── */
.scrim-top, .scrim-bottom { position: absolute; left: 0; right: 0; pointer-events: none; z-index: 5; }
.scrim-top { top: 0; height: 150px; background: linear-gradient(180deg, rgba(0,0,0,0.55), transparent); }
.scrim-bottom { bottom: 0; height: 200px; background: linear-gradient(0deg, rgba(0,0,0,0.7), transparent); }

/* ─── buttons ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: none; cursor: pointer; font-family: var(--font-ui); font-weight: 600; font-size: 15.5px;
  color: var(--text); background: var(--surface-2); border-radius: var(--r-md);
  padding: 14px 20px; transition: transform 0.09s var(--ease), background 0.2s, filter 0.2s;
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 20px; height: 20px; }
.btn-primary {
  background: linear-gradient(145deg, var(--primary), var(--primary-2)); color: #1a0d05;
  font-weight: 700; box-shadow: 0 10px 28px rgba(255,138,76,0.4);
}
.btn-primary:active { filter: brightness(0.96); }
.btn-lg { width: 100%; font-size: 17px; padding: 18px; }
.btn-ghost { background: var(--glass); border: 1px solid var(--glass-stroke); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.btn-sm { font-size: 13px; padding: 10px 16px; }
.btn-block { width: 100%; }

/* ════════════════ CAMERA ════════════════ */
.page-cam, .page-view { position: relative; min-height: 100dvh; }

.cam-wrap, .view-wrap { max-width: 480px; margin: 0 auto; padding: 0 18px; }

/* start panel (before turning on) */
.start-panel {
  min-height: 100dvh; display: flex; flex-direction: column; justify-content: center;
  max-width: 440px; margin: 0 auto; padding: 88px 22px 40px; text-align: center;
}
.start-glyph {
  width: 88px; height: 88px; margin: 0 auto 24px; border-radius: 26px; display: grid; place-items: center;
  background: var(--bg-elev); border: 1px solid var(--glass-stroke); color: var(--primary);
  box-shadow: var(--shadow-card);
}
.start-glyph svg { width: 44px; height: 44px; }
.start-panel h2 { font-size: 26px; font-weight: 700; }
.start-help { color: var(--muted); font-size: 15.5px; line-height: 1.6; margin: 12px 0 30px; }
.start-help b { color: var(--text); }
.start-note { color: var(--faint); font-size: 13px; margin: 16px 0 0; }
.start-note b { color: var(--warn); }

/* running: full-bleed preview hero */
.stage { position: fixed; inset: 0; background: #000; overflow: hidden; }
.stage video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000;
}
#camPreview { transform: none; } /* 미러 여부는 JS 가 카메라 방향에 따라 설정 */

/* pairing card floating over preview */
.pair {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 10;
  width: min(86vw, 320px); padding: 22px; text-align: center;
  background: var(--glass-solid); -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%);
  border: 1px solid var(--glass-stroke); border-top-color: var(--glass-hi);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
  transition: opacity 0.4s, transform 0.4s var(--ease);
}
.pair-eyebrow {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--primary); margin-bottom: 4px;
}
.pair-help { color: var(--text); font-size: 14.5px; line-height: 1.45; margin: 0 0 18px; }
.pair-help b { color: var(--text); }
/* QR tile with breathing corner brackets */
.qr-tile { position: relative; width: 220px; margin: 0 auto; padding: 14px; border-radius: 18px; background: #fff; }
.qr-tile img { width: 100%; height: auto; display: block; border-radius: 6px; }
.qr-tile::before, .qr-tile::after,
.qr-frame::before, .qr-frame::after {
  content: ""; position: absolute; width: 26px; height: 26px; border: 3px solid var(--primary); border-radius: 4px;
  animation: breathe 2.4s ease-in-out infinite;
}
.qr-tile::before { top: -7px; left: -7px; border-right: none; border-bottom: none; }
.qr-tile::after  { top: -7px; right: -7px; border-left: none; border-bottom: none; }
.qr-frame::before { bottom: -7px; left: -7px; border-right: none; border-top: none; }
.qr-frame::after  { bottom: -7px; right: -7px; border-left: none; border-top: none; }
.room-code-box { margin-top: 16px; }
.room-code-label { display: block; color: var(--muted); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.room-code { font-family: var(--font-mono); font-weight: 700; font-size: 30px; letter-spacing: 6px; color: var(--text); }
#viewerLink, .viewer-link { display: none; }

/* hide pairing card once a viewer is connected */
.stage[data-connected="true"] .pair { opacity: 0; transform: translate(-50%, -46%) scale(0.96); pointer-events: none; }

/* bottom control bar (camera) */
.cam-dock {
  position: absolute; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 12; width: min(92vw, 420px);
  display: flex; flex-direction: column; gap: 12px;
  background: rgba(14, 16, 22, 0.18); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--glass-stroke); border-top-color: var(--glass-hi);
  border-radius: var(--r-lg); padding: 14px 16px; box-shadow: var(--shadow-glass);
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
.motion-row { display: flex; align-items: center; gap: 12px; }
.motion-meter { flex: 1; height: 7px; border-radius: var(--r-pill); background: rgba(255,255,255,0.12); overflow: hidden; }
.motion-bar { height: 100%; width: 0%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--success), var(--warn) 70%, var(--alert)); transition: width 0.14s linear; }
.last-motion { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.sens { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12.5px; }
.sens span { white-space: nowrap; }
.sens input[type=range] { flex: 1; accent-color: var(--primary); height: 4px; }
.cam-actions { display: flex; gap: 10px; }
.cam-actions .btn { flex: 1; }
.motion-toggle.off { color: var(--muted); }
.cam-reset { background: transparent; border: none; color: var(--faint); font: 600 12px var(--font-ui); padding: 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ════════════════ VIEWER ════════════════ */
/* connect panel — Apple-style device setup */
.connect {
  min-height: 100dvh; display: flex; flex-direction: column; justify-content: center;
  max-width: 420px; margin: 0 auto; padding: 92px 22px 40px;
}
.connect-card {
  background: var(--bg-elev); border: 1px solid var(--glass-stroke); border-radius: var(--r-lg);
  padding: 28px 24px; box-shadow: var(--shadow-card);
}
.connect-glyph {
  width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 20px; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--glass-stroke); color: var(--success);
}
.connect-glyph svg { width: 32px; height: 32px; }
.connect h2 { text-align: center; font-size: 23px; font-weight: 700; }
.connect-tagline { text-align: center; color: var(--muted); font-size: 14px; margin: 8px 0 24px; }
.field { display: block; margin-bottom: 16px; }
.field > span { display: block; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 8px; }
.code-input {
  width: 100%; background: var(--surface); border: 1px solid var(--glass-stroke); border-radius: var(--r-md);
  color: var(--text); font-family: var(--font-mono); font-weight: 700; font-size: 26px; letter-spacing: 8px;
  text-align: center; padding: 15px; text-transform: uppercase; transition: border-color 0.2s, box-shadow 0.2s;
}
.code-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255,138,76,0.2); }
.key-input {
  width: 100%; background: var(--surface); border: 1px solid var(--glass-stroke); border-radius: var(--r-md);
  color: var(--muted); font-family: var(--font-mono); font-size: 13px; padding: 13px; transition: border-color 0.2s;
}
.key-input:focus { outline: none; border-color: var(--primary); color: var(--text); }
.connect-note { color: var(--faint); font-size: 12.5px; line-height: 1.5; text-align: center; margin: 16px 0 0; }
.connect-note b { color: var(--primary); }

/* live panel — full-bleed video */
.live { position: fixed; inset: 0; background: #000; }
.video-shell { position: absolute; inset: 0; }
.remote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }

/* metrics chip (statsOverlay) */
.stats-overlay {
  position: absolute; top: calc(16px + env(safe-area-inset-top)); right: 16px; z-index: 8;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 11px; border-radius: var(--r-pill);
  background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--glass-stroke);
  font-family: var(--font-mono); font-size: 11px; color: var(--text);
}
.stats-overlay::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--success); }

.tap-to-play {
  position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 14px; background: rgba(0,0,0,0.55);
  color: var(--text); font-family: var(--font-display); font-weight: 600; font-size: 18px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.tap-to-play .play-orb {
  width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--primary), var(--primary-2)); color: #1a0d05;
  box-shadow: 0 12px 36px rgba(255,138,76,0.5); animation: livePulse 1.8s infinite;
}
.tap-to-play .play-orb svg { width: 34px; height: 34px; margin-left: 4px; }

/* floating control pill */
.dock-wrap {
  position: absolute; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 12; display: flex; flex-direction: column; align-items: center; gap: 10px;
  animation: dockUp 0.4s var(--ease) both;
}
.pill-hint {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-pill);
  background: rgba(14,16,22,0.4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.82);
  text-shadow: 0 1px 3px rgba(0,0,0,0.7); white-space: nowrap; pointer-events: none;
}
.pill-hint b { color: var(--primary); font-weight: 700; }
.control-pill {
  /* 기본은 절대배치(하단 중앙) — 구버전 HTML(dock-wrap 없음) 캐시여도 바닥에 고정 */
  position: absolute; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 12;
  display: flex; align-items: center; gap: 18px; padding: 12px 18px; border-radius: var(--r-pill);
  background: rgba(14, 16, 22, 0.10); /* 블러 없음 — 뒤 영상 그대로 보임 */
  border: 1px solid var(--glass-stroke); border-top-color: var(--glass-hi); box-shadow: var(--shadow-glass);
}
/* dock-wrap 이 감싸면 dock-wrap 이 위치를 잡으므로 필은 정적 배치로 되돌림 */
.dock-wrap .control-pill { position: static; left: auto; bottom: auto; transform: none; z-index: auto; }
.ctrl {
  width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
  border: none; background: transparent; color: var(--text); cursor: pointer;
  transition: transform 0.09s var(--ease), background 0.2s, color 0.2s;
}
.ctrl:active { transform: scale(0.92); }
.ctrl svg { width: 23px; height: 23px; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.9)); }
.ctrl .ic-off { display: none; }
.ctrl[data-muted="true"] { background: var(--alert); color: #fff; }
.ctrl[data-muted="true"] .ic-on { display: none; }
.ctrl[data-muted="true"] .ic-off { display: block; }

/* push-to-talk hero */
.ptt {
  width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center;
  border: none; cursor: pointer; color: #1a0d05;
  background: linear-gradient(145deg, var(--primary), var(--primary-2));
  box-shadow: 0 8px 24px rgba(255,138,76,0.5);
  transition: transform 0.12s var(--ease), background 0.2s;
}
.ptt svg { width: 28px; height: 28px; }
.ptt:active { transform: scale(0.95); }
.ptt.active { transform: scale(1.08); background: linear-gradient(145deg, var(--primary-press), var(--primary-2)); animation: pttRing 1.1s infinite; }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: calc(118px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(16px);
  z-index: 70; max-width: calc(100vw - 36px);
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: var(--r-pill);
  background: var(--glass-solid); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid var(--glass-stroke); border-top-color: var(--glass-hi);
  color: var(--text); font-weight: 600; font-size: 14px; box-shadow: var(--shadow-card);
  opacity: 0; pointer-events: none; transition: opacity 0.28s, transform 0.28s var(--ease);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

#pushState, .push-state { display: none; }

/* ─── keyframes ─── */
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(52,210,123,0.6); }
  70%  { box-shadow: 0 0 0 9px rgba(52,210,123,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,210,123,0); }
}
@keyframes pttRing {
  0%   { box-shadow: 0 0 0 0 rgba(255,138,76,0.55), 0 8px 24px rgba(255,138,76,0.5); }
  100% { box-shadow: 0 0 0 20px rgba(255,138,76,0), 0 8px 24px rgba(255,138,76,0.5); }
}
@keyframes blink { 50% { opacity: 0.3; } }
@keyframes breathe { 0%, 100% { opacity: 0.5; transform: scale(0.92); } 50% { opacity: 1; transform: scale(1); } }
@keyframes floatIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dockUp { from { opacity: 0; transform: translateX(-50%) translateY(14px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ── 다시보기(모션 클립) ─────────────────────────────────────────────────── */
#clipsBtn { position: relative; }
#clipsBtn.has-new::after {
  content: ''; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 2px var(--bg-elev);
}

.clips-panel {
  position: fixed; inset: 0; z-index: 60; background: var(--bg);
  display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform 0.32s var(--ease);
  padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
}
.clips-panel.open { transform: translateY(0); }
.clips-head {
  display: flex; align-items: center; gap: 12px; padding: 18px 20px 12px;
  border-bottom: 1px solid var(--glass-stroke);
}
.clips-title { font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.clips-close {
  margin-left: auto; width: 38px; height: 38px; border-radius: 50%; border: none;
  background: var(--surface); color: var(--text); font-size: 17px; cursor: pointer;
}
.clips-list { flex: 1; overflow-y: auto; padding: 14px 16px 8px; display: flex; flex-direction: column; gap: 10px; }
.clips-empty { color: var(--muted); text-align: center; padding: 60px 20px; line-height: 1.8; font-size: 15px; }
.clips-foot { color: var(--faint); font-size: 12px; text-align: center; padding: 10px 16px 16px; }

.clip-item {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--bg-elev); border: 1px solid var(--glass-stroke); border-radius: var(--r-md);
  padding: 10px; cursor: pointer; color: var(--text); transition: background 0.15s, transform 0.1s;
}
.clip-item:active { transform: scale(0.99); background: var(--surface); }
.clip-thumb {
  position: relative; flex: none; width: 96px; height: 66px; border-radius: var(--r-sm);
  overflow: hidden; background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%239AA0AD' stroke-width='2'%3E%3Cpath d='M23 7l-7 5 7 5V7z'/%3E%3Crect x='1' y='5' width='15' height='14' rx='2.5'/%3E%3C/svg%3E") center/24px no-repeat;
}
.clip-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.25s; }
.clip-thumb img.loaded { opacity: 1; }
.clip-dur {
  position: absolute; right: 5px; bottom: 5px; background: rgba(0,0,0,0.65);
  color: #fff; font: 600 11px var(--font-mono, monospace); padding: 1px 6px; border-radius: 6px;
}
.clip-meta { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.clip-time { font-weight: 600; font-size: 15px; }
.clip-sub { color: var(--muted); font-size: 12.5px; }
.clip-del {
  flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  color: var(--faint); font-size: 14px;
}
.clip-del:active { color: var(--alert); background: rgba(255,77,79,0.12); }

.clip-player {
  position: fixed; inset: 0; z-index: 70; background: #000; display: none;
  align-items: center; justify-content: center;
}
.clip-player.open { display: flex; }
.clip-video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.clip-player-close {
  position: absolute; top: calc(env(safe-area-inset-top) + 12px); right: 14px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.55); color: #fff; font-size: 18px; cursor: pointer; backdrop-filter: blur(6px);
}
.clip-loading {
  position: fixed; inset: 0; z-index: 71; display: none; align-items: center; justify-content: center;
  gap: 10px; background: rgba(0,0,0,0.6); color: #fff; font-size: 15px; backdrop-filter: blur(4px);
}
.clip-loading.show { display: flex; }
.clip-spinner {
  width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,0.3);
  border-top-color: var(--primary); animation: clipSpin 0.8s linear infinite;
}
@keyframes clipSpin { to { transform: rotate(360deg); } }

/* ── AI 소리 감지 토글 ─────────────────────────────────────────────────── */
.sound-toggle { width: 100%; margin-top: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.sound-toggle.off { opacity: 0.7; }
.sound-row { margin-top: 8px; text-align: center; }
.pro-tag {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.04em; background: linear-gradient(145deg, var(--primary), var(--primary-2));
  color: #1a0d05; padding: 1px 6px; border-radius: 6px; vertical-align: middle;
}
.clip-chip {
  display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 700;
  background: rgba(255, 138, 76, 0.18); color: var(--primary); padding: 1px 8px; border-radius: 999px; vertical-align: middle;
}

/* ── 여러 카메라(내 펫캠) ─────────────────────────────────────────────────── */
.cam-chip {
  position: absolute; top: calc(env(safe-area-inset-top) + 12px); left: 14px; z-index: 4;
  display: inline-flex; align-items: center; gap: 6px; max-width: 62%;
  background: var(--glass-solid); border: 1px solid var(--glass-stroke); color: var(--text);
  border-radius: var(--r-pill); padding: 7px 11px; font-size: 13.5px; font-weight: 600;
  backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3); cursor: pointer;
}
.cam-chip svg { width: 15px; height: 15px; flex: none; }
.cam-chip > svg:first-of-type { color: var(--primary); }
.cam-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cam-item {
  display: flex; align-items: center; gap: 11px; padding: 13px 14px; cursor: pointer;
  background: var(--bg-elev); border: 1px solid var(--glass-stroke); border-radius: var(--r-md);
}
.cam-item.active { border-color: rgba(255, 138, 76, 0.5); background: linear-gradient(160deg, rgba(255, 138, 76, 0.10), var(--bg-elev) 60%); }
.cam-item:active { background: var(--surface); }
.cam-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); flex: none; }
.cam-dot.on { background: var(--success); box-shadow: 0 0 8px rgba(52, 210, 123, 0.7); }
.cam-name { flex: 1; font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cam-act { width: 32px; height: 32px; border: none; background: transparent; color: var(--faint); font-size: 14px; border-radius: 50%; cursor: pointer; flex: none; }
.cam-act:active { background: var(--surface); }

.cameras-add { display: flex; gap: 8px; padding: 12px 16px 4px; align-items: center; flex-wrap: wrap; }
.cameras-add .code-input { width: 96px; flex: none; text-align: center; }
.cameras-add .key-input { flex: 1; min-width: 110px; }
.cameras-add .btn { flex: none; }