/* ===========================================================
   ArchiViz — Mockup: Premium Glass (Dark only, Liquid Glass tone)
   - data-theme="dark" 강제 (HTML inline script)
   - 토글은 숨김
   - 기존 [data-theme="dark"] 토큰 활용 + 글래스 레이어만 추가
   =========================================================== */

/* ===== 다크 강제 + 토글 비활성 ===== */
body.mockup-glass .theme-pill { display: none !important; }

/* 다크 색상 토큰 살짝 시네마틱 톤으로 보정 (아주 미세) */
[data-theme="dark"] body.mockup-glass {
  --glass-blur: blur(40px) saturate(180%);
}

/* ===== 배경 blob 레이어 (mg-bg) ===== */
.mg-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.mg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  will-change: transform;
}
.mg-blob-1 {
  width: 520px; height: 520px;
  top: -160px; left: -100px;
  background: radial-gradient(circle, #ff7a45 0%, #d24818 50%, transparent 75%);
  opacity: 0.35;
  animation: mg-float-1 22s ease-in-out infinite;
}
.mg-blob-2 {
  width: 460px; height: 460px;
  top: 8%; right: -140px;
  background: radial-gradient(circle, #4f7cff 0%, #2a4fc8 50%, transparent 75%);
  opacity: 0.25;
  animation: mg-float-2 26s ease-in-out infinite;
}
.mg-blob-3 {
  width: 680px; height: 680px;
  bottom: -260px; left: 22%;
  background: radial-gradient(circle, #6b3eff 0%, #3b1ec8 45%, transparent 75%);
  opacity: 0.22;
  animation: mg-float-3 30s ease-in-out infinite;
}
.mg-blob-4 {
  width: 420px; height: 420px;
  bottom: 10%; right: 14%;
  background: radial-gradient(circle, #ff4d8a 0%, #b8185c 50%, transparent 75%);
  opacity: 0.20;
  animation: mg-float-4 28s ease-in-out infinite;
}
@keyframes mg-float-1 { 0%,100% { transform: translate(0,0) scale(1);} 50% { transform: translate(60px,40px) scale(1.08);} }
@keyframes mg-float-2 { 0%,100% { transform: translate(0,0) scale(1);} 50% { transform: translate(-50px,30px) scale(1.05);} }
@keyframes mg-float-3 { 0%,100% { transform: translate(0,0) scale(1);} 50% { transform: translate(40px,-50px) scale(1.10);} }
@keyframes mg-float-4 { 0%,100% { transform: translate(0,0) scale(1);} 50% { transform: translate(-40px,-30px) scale(1.06);} }

.mg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
  opacity: 0.5;
}
.mg-noise {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.30;
  mix-blend-mode: overlay;
}

body.mockup-glass {
  background:
    radial-gradient(1200px 800px at 110% -10%, rgba(255,122,69,0.10), transparent 60%),
    radial-gradient(900px 700px at -10% 110%, rgba(120,90,255,0.10), transparent 60%),
    #07090f !important;
  min-height: 100vh;
}
body.mockup-glass > *:not(.mg-bg) { z-index: 1; }
body.mockup-glass > .main { position: relative; }

/* 기존 lobby orb 제거 (다크 베이스 + blob 으로 대체) */
body.mockup-glass .lobby-orb,
body.mockup-glass .lobby-orb-wrap,
body.mockup-glass #lobbyCanvas {
  display: none !important;
}
body.mockup-glass .lobby-hero {
  background: transparent !important;
}

/* ===========================================================
   HERO
   =========================================================== */

/* AI 기반 건축 렌더링 도구 배지 */
body.mockup-glass [class*="lobby-tagline-pill"],
body.mockup-glass [class*="hero-tagline"] {
  background: rgba(255,122,69,0.12) !important;
  border: 1px solid rgba(255,122,69,0.32) !important;
  color: #ffb088 !important;
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
}

/* 로고 */
body.mockup-glass .hero-logo-img,
body.mockup-glass .lobby-title-logo img {
  filter: drop-shadow(0 12px 32px rgba(255,107,53,0.32));
}

/* HERO DEMO 카드 */
body.mockup-glass .hero-demo {
  background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 100%) !important;
  backdrop-filter: blur(50px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(50px) saturate(200%) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 28px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 -1px 0 rgba(0,0,0,0.25) inset,
    0 24px 60px rgba(0,0,0,0.45),
    0 48px 120px rgba(0,0,0,0.20) !important;
}

/* ===========================================================
   KEY FEATURES — 카드 호버 인터랙션 유지하면서 글래스 톤
   =========================================================== */
body.mockup-glass .lobby-features,
body.mockup-glass .lobby-features-hero {
  background: rgba(255,255,255,0.025) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 28px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 14px 40px rgba(0,0,0,0.30) !important;
}

body.mockup-glass .lobby-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 100%) !important;
  backdrop-filter: blur(32px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(160%) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 20px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 -1px 0 rgba(0,0,0,0.20) inset,
    0 12px 32px rgba(0,0,0,0.30) !important;
  overflow: hidden !important;
}
body.mockup-glass .lobby-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(255,122,69,0.40) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.12) inset,
    0 -1px 0 rgba(0,0,0,0.25) inset,
    0 24px 56px rgba(0,0,0,0.50),
    0 0 0 1px rgba(255,122,69,0.18) !important;
}

/* 아이콘 박스 */
body.mockup-glass .lobby-card-icon {
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
}
body.mockup-glass .lc-icon-wrap {
  background: rgba(255,122,69,0.14) !important;
  border: 1px solid rgba(255,122,69,0.28) !important;
}
body.mockup-glass .lc-icon-wrap svg {
  stroke: #ff9870 !important;
  fill: none !important;
}

/* ===========================================================
   STEP 박스 (모든 메인 섹션 공통)
   =========================================================== */

/* Step 메인 컨테이너 (.step 자체) */
body.mockup-glass .step,
body.mockup-glass .prompt-area,
body.mockup-glass .result-area {
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%) !important;
  backdrop-filter: blur(28px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(170%) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 20px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 -1px 0 rgba(0,0,0,0.20) inset,
    0 12px 32px rgba(0,0,0,0.30) !important;
}
body.mockup-glass .step:hover,
body.mockup-glass .prompt-area:hover {
  border-color: rgba(255,255,255,0.16) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 100%) !important;
}

/* Step 헤더 타이틀 */
body.mockup-glass .step-header h3 {
  color: #eef1f7 !important;
  letter-spacing: -0.02em;
}

/* Step Flow Bar (① 장면 설명 › ② 태그 확인 › ③ 렌더링) */
body.mockup-glass .step-flow-bar {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 999px !important;
  backdrop-filter: blur(20px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(170%) !important;
  padding: 6px 10px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 6px 18px rgba(0,0,0,0.25) !important;
}
body.mockup-glass .step-flow-item {
  color: #8b93a6 !important;
  background: transparent !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  transition: all 0.25s ease;
}
body.mockup-glass .step-flow-item.active {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(255,122,69,0.85) 0%, rgba(255,150,109,0.85) 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.20) inset,
    0 4px 12px rgba(255,107,53,0.30) !important;
}
body.mockup-glass .step-flow-item.done {
  color: #b3bac9 !important;
  background: rgba(255,255,255,0.06) !important;
}
body.mockup-glass .step-flow-arrow {
  color: #555c6e !important;
  margin: 0 2px;
}

/* Step Badge (1-2-3 dot indicator) */
body.mockup-glass .sb-dot {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.18) !important;
  color: #8b93a6 !important;
}
body.mockup-glass .sb-dot.sb-current {
  background: linear-gradient(135deg, #ff7a45 0%, #ff966d 100%) !important;
  border-color: rgba(255,122,69,0.50) !important;
  color: #fff !important;
  box-shadow: 0 0 0 4px rgba(255,122,69,0.16), 0 4px 12px rgba(255,107,53,0.30) !important;
}
body.mockup-glass .sb-dot.sb-done {
  background: rgba(255,255,255,0.16) !important;
  border-color: rgba(255,255,255,0.20) !important;
  color: #d8dde7 !important;
}
body.mockup-glass .sb-sep {
  background: rgba(255,255,255,0.12) !important;
}

/* Step Progress Bar (하단 진행 바) */
body.mockup-glass .step-progress {
  background: rgba(255,255,255,0.06) !important;
  border-radius: 999px !important;
}
body.mockup-glass .step-progress-bar {
  background: linear-gradient(90deg, #ff7a45 0%, #ff966d 100%) !important;
  box-shadow: 0 0 12px rgba(255,107,53,0.50) !important;
}

/* Step Completed (완료 단계 카드) */
body.mockup-glass .step-completed {
  background: rgba(60,180,120,0.10) !important;
  border: 1px solid rgba(60,180,120,0.30) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}

/* 태그/카테고리 패널 (마감, 도면, 편집 등에서 쓰임) */
body.mockup-glass .tag-category,
body.mockup-glass .tags-panel,
body.mockup-glass .ref-toggle,
body.mockup-glass .hero-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  color: #eef1f7 !important;
}

/* ===========================================================
   메인 섹션 - 영상/내부 빈 placeholder 영역도 글래스 패널화
   =========================================================== */

/* 메인 섹션 공통 글래스 패널화 */
body.mockup-glass .section .panel,
body.mockup-glass .section .card,
body.mockup-glass .section [class*="panel"],
body.mockup-glass .section .result-area,
body.mockup-glass .section .input-area,
body.mockup-glass .section .preview-area,
body.mockup-glass .section .options-area,
body.mockup-glass .section .controls,
body.mockup-glass .section .left-pane,
body.mockup-glass .section .right-pane {
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%) !important;
  backdrop-filter: blur(28px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(170%) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 20px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 12px 32px rgba(0,0,0,0.30) !important;
}

/* 입력창 */
body.mockup-glass .section input[type="text"],
body.mockup-glass .section input[type="password"],
body.mockup-glass .section textarea,
body.mockup-glass .section select {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: #eef1f7 !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
body.mockup-glass .section input::placeholder,
body.mockup-glass .section textarea::placeholder {
  color: #7d8699 !important;
}
body.mockup-glass .section input:focus,
body.mockup-glass .section textarea:focus {
  border-color: rgba(255,122,69,0.50) !important;
  background: rgba(255,255,255,0.06) !important;
  box-shadow: 0 0 0 4px rgba(255,122,69,0.12) !important;
  outline: none;
}

/* 토글/모드 버튼 */
body.mockup-glass .toggle-group {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
body.mockup-glass .mode-btn {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: #b3bac9 !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body.mockup-glass .mode-btn.active {
  background: rgba(255,122,69,0.18) !important;
  border-color: rgba(255,122,69,0.40) !important;
  color: #ff9870 !important;
}

/* 사이드바 */
body.mockup-glass aside,
body.mockup-glass .sidebar,
body.mockup-glass nav.sidebar {
  background: rgba(7,9,15,0.55) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  border-right: 1px solid rgba(255,255,255,0.06) !important;
}

/* ===========================================================
   WORKBOARD 섹션 — 인라인 스타일이 라이트 톤으로 박혀있어 강제 오버라이드
   =========================================================== */

/* "새 워크보드 만들기" 큰 카드 (인라인 background:rgba(255,255,255,.35)) */
body.mockup-glass .section[data-page="workboard"] > div > div[style*="rgba(255,255,255"] {
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%) !important;
  backdrop-filter: blur(28px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(170%) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 20px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 12px 32px rgba(0,0,0,0.30) !important;
}

/* 워크보드 입력창 */
body.mockup-glass #wbNewTitle,
body.mockup-glass #wbNewPassword,
body.mockup-glass #wbPwInput,
body.mockup-glass .wb-send-input {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #eef1f7 !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}
body.mockup-glass #wbNewTitle::placeholder,
body.mockup-glass #wbNewPassword::placeholder {
  color: #7d8699 !important;
}

/* 워크보드 메인 섹션 — ambient orb 추가로 진짜 글래스 느낌 */
body.mockup-glass .section[data-page="workboard"] {
  position: relative;
  isolation: isolate;
}
body.mockup-glass .section[data-page="workboard"]::before,
body.mockup-glass .section[data-page="workboard"]::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: -1;
}
body.mockup-glass .section[data-page="workboard"]::before {
  width: 520px; height: 520px;
  top: -120px; left: -80px;
  background: radial-gradient(circle, rgba(255,122,69,0.40) 0%, rgba(210,72,24,0.20) 45%, transparent 75%);
}
body.mockup-glass .section[data-page="workboard"]::after {
  width: 620px; height: 620px;
  bottom: -180px; right: -100px;
  background: radial-gradient(circle, rgba(107,62,255,0.35) 0%, rgba(59,30,200,0.15) 50%, transparent 75%);
}

/* '+ 새 워크보드 만들기' 래퍼 박스 (라이트 인라인 스타일) */
body.mockup-glass .section[data-page="workboard"] > div > div[style*="rgba(255,255,255,.35)"],
body.mockup-glass .section[data-page="workboard"] > div > div[style*="rgba(255,255,255, .35)"] {
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%) !important;
  backdrop-filter: blur(28px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(170%) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 12px 32px rgba(0,0,0,0.40) !important;
  color: #eef1f7 !important;
}
/* 해당 박스 내 입력창 (rgba(255,255,255,.3)) */
body.mockup-glass #wbNewTitle[style],
body.mockup-glass #wbNewPassword[style] {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #eef1f7 !important;
}
body.mockup-glass #wbNewTitle[style]::placeholder,
body.mockup-glass #wbNewPassword[style]::placeholder {
  color: #7d8699 !important;
}
/* 만들기 버튼 */
body.mockup-glass #wbCreateBtn[style] {
  background: linear-gradient(135deg, #ff7a45 0%, #ff966d 100%) !important;
  border: 0 !important;
  box-shadow: 0 7px 18px rgba(255,107,53,0.28) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
body.mockup-glass #wbCreateBtn[style]:hover {
  filter: brightness(1.06);
}

/* 워크보드 카드 그리드 (개별 보드) — inline style.cssText 강제 오버라이드 */
body.mockup-glass #wbBoardsGrid > div,
body.mockup-glass #wbBoardsGrid > div[style] {
  background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 100%) !important;
  backdrop-filter: blur(24px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(170%) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 16px !important;
  color: #eef1f7 !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 8px 24px rgba(0,0,0,0.35) !important;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}
/* JS의 mouseenter 인라인 style 무력화: hover에서 강제 우선 */
body.mockup-glass #wbBoardsGrid > div:hover,
body.mockup-glass #wbBoardsGrid > div[style]:hover {
  background: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 100%) !important;
  transform: translateY(-3px) !important;
  border-color: rgba(255,122,69,0.45) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 14px 32px rgba(0,0,0,0.50),
    0 0 0 1px rgba(255,122,69,0.18) !important;
}
/* 카드 내부 텍스트 톤 */
body.mockup-glass #wbBoardsGrid > div [style*="font-weight:700"],
body.mockup-glass #wbBoardsGrid > div [style*="font-weight: 700"] {
  color: #eef1f7 !important;
}
body.mockup-glass #wbBoardsGrid > div [style*="text-muted"],
body.mockup-glass #wbBoardsGrid > div [style*="font-size:12px"],
body.mockup-glass #wbBoardsGrid > div [style*="font-size: 12px"] {
  color: #8a93a6 !important;
}
/* 카드 내부 삭제 버튼 */
body.mockup-glass #wbBoardsGrid button[data-wb-delete] {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #b3bac9 !important;
  backdrop-filter: blur(12px) !important;
}
body.mockup-glass #wbBoardsGrid button[data-wb-delete]:hover {
  background: rgba(255,90,90,0.15) !important;
  border-color: rgba(255,90,90,0.40) !important;
  color: #ff8a8a !important;
}

/* 비밀번호 모달 */
body.mockup-glass #wbPwOverlay > div {
  background: linear-gradient(135deg, rgba(20,23,35,0.85) 0%, rgba(15,18,28,0.92) 100%) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #eef1f7 !important;
}

/* ===========================================================
   영상 생성 섹션
   =========================================================== */
body.mockup-glass .section[data-page="video"] > div,
body.mockup-glass .section[data-page="video"] [class*="video"],
body.mockup-glass .section[data-page="video"] .video-input,
body.mockup-glass .section[data-page="video"] .video-preview {
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%) !important;
  backdrop-filter: blur(28px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(170%) !important;
  border-color: rgba(255,255,255,0.10) !important;
}

/* ===========================================================
   갤러리 (커뮤니티 + 내 갤러리)
   =========================================================== */
body.mockup-glass .lobby-gallery-section,
body.mockup-glass .lobby-gallery,
body.mockup-glass .section[data-page="gallery"] {
  background: transparent !important;
}
body.mockup-glass .lobby-gallery-thumb,
body.mockup-glass [class*="gallery-thumb"],
body.mockup-glass .gallery-grid > * {
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.40);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
body.mockup-glass .lobby-gallery-thumb:hover,
body.mockup-glass [class*="gallery-thumb"]:hover,
body.mockup-glass .gallery-grid > *:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 18px 44px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,122,69,0.25);
  border-color: rgba(255,122,69,0.30) !important;
}

/* 갤러리 페이지 버튼 */
body.mockup-glass .gallery-page-btn {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #b3bac9 !important;
}
body.mockup-glass .gallery-page-btn:hover:not(:disabled):not(.active) {
  background: rgba(255,122,69,0.12) !important;
  color: #ff9870 !important;
}

/* ===========================================================
   모달 공통 — 글래스 다크
   =========================================================== */
body.mockup-glass .modal-overlay,
body.mockup-glass .crop-modal,
body.mockup-glass .wb-send-overlay,
body.mockup-glass .my-gallery-auth-modal {
  background: rgba(0,0,0,0.65) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body.mockup-glass .modal-content,
body.mockup-glass .crop-modal-content,
body.mockup-glass .wb-send-modal,
body.mockup-glass .my-gallery-auth-box {
  background: linear-gradient(135deg, rgba(20,23,35,0.85) 0%, rgba(15,18,28,0.92) 100%) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #eef1f7 !important;
}

/* ===========================================================
   토스트
   =========================================================== */
body.mockup-glass .toast {
  background: rgba(20,23,35,0.92) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #eef1f7 !important;
}

/* ===========================================================
   로딩 오버레이
   =========================================================== */
body.mockup-glass .loading-overlay {
  background: rgba(0,0,0,0.72) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body.mockup-glass .loading-card {
  background: linear-gradient(135deg, rgba(20,23,35,0.85) 0%, rgba(15,18,28,0.92) 100%) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #eef1f7 !important;
}

/* ===========================================================
   스크롤바
   =========================================================== */
body.mockup-glass::-webkit-scrollbar { width: 10px; height: 10px; }
body.mockup-glass::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
body.mockup-glass::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.10); border-radius: 10px;
}
body.mockup-glass::-webkit-scrollbar-thumb:hover { background: rgba(255,122,69,0.40); }

@media (prefers-reduced-motion: reduce) {
  .mg-blob { animation: none !important; }
}

/* 워크보드 생성 버튼: 브라우저 기본 outset/상단 흰 하이라이트 제거 */
body.mockup-glass #wbCreateBtn {
  border: 0 !important;
  box-shadow: 0 7px 18px rgba(255,107,53,0.28) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  outline: none !important;
}

/* Upscale: use the start button itself as the loading/progress indicator */
body.mockup-glass .btn-primary.upscale-processing,
body.mockup-glass .btn-primary.upscale-processing:disabled {
  position: relative;
  overflow: hidden;
  color: #fff !important;
  cursor: wait !important;
  opacity: 1 !important;
  border: 0 !important;
  background: linear-gradient(90deg, #ff6b35 0%, #ffb17a 28%, #ff7a45 52%, #ffcfad 76%, #ff6b35 100%) !important;
  background-size: 300% 100% !important;
  box-shadow: 0 12px 28px rgba(255,107,53,.34), 0 4px 12px rgba(255,107,53,.24) !important;
  animation: upscaleButtonFlow 1.1s linear infinite !important;
  pointer-events: none;
}
body.mockup-glass .btn-primary.upscale-processing::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.32) 45%, transparent 75%);
  transform: translateX(-100%);
  animation: upscaleButtonSweep 1.35s ease-in-out infinite;
  pointer-events: none;
}
body.mockup-glass .btn-primary.upscale-processing .upscale-processing-text {
  position: relative;
  z-index: 1;
  font-weight: 850;
  letter-spacing: .01em;
}
@keyframes upscaleButtonFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}
@keyframes upscaleButtonSweep {
  0% { transform: translateX(-120%); }
  55%, 100% { transform: translateX(120%); }
}