/* HFLUX — 2026 Cinematic Design System
   Dark Film Production · Orange Glow · Premium Typography
   Brand: #FF6A00 primary / #FF9A1F secondary / #0B0B0D bg */

/* 페인트 전 홈 깜빡임 차단 — boot.js 가 비홈 해시로 새로고침 시 html.booting 부착 →
   app.js 의 탭 복원 실행 전까지 홈(마케팅) 화면을 숨김. app.js 가 복원/인증 확정 후 booting 해제.
   홈 화면 = #std-panels(히어로·home 패널) + .site-footer(마케팅 헤드라인·사이트맵) 둘 다 숨김. */
html.booting #std-panels,
html.booting .site-footer { display: none !important; }

:root {
  /* ── Brand Primary ── */
  --acc:        #FF6A00;
  --acc2:       #FF9A1F;
  --acc-dim:    rgba(255,106,0,0.15);
  --acc-glow:   rgba(255,106,0,0.35);

  /* ── Brand Extended (from board) ── */
  --brand-red:      #8B2C44;
  --brand-maroon:   #46122B;
  --brand-warm-gray:#A9A29A;

  /* ── Background / Surface ── */
  --bg:         #0B0B0D;
  --surface-1:  #111214;
  --surface-2:  #16181C;
  --surface-3:  #1C1E24;
  --card-bg:    rgba(16, 17, 20, 0.88);
  --card-h:     rgba(22, 24, 29, 0.92);

  /* ── Border ── */
  --border:     rgba(255,255,255,0.06);
  --border-h:   rgba(255,255,255,0.11);
  --border-acc: rgba(255,106,0,0.28);

  /* ── Text ── */
  --text-1:     #F5F5F0;
  --text-2:     #9A9A95;
  --text-3:     #4A4A50;
  --text-acc:   #FF6A00;

  /* ── Glow ── */
  --glow-sm:    0 0 12px rgba(255,106,0,0.28);
  --glow-md:    0 0 28px rgba(255,106,0,0.38);
  --glow-lg:    0 0 56px rgba(255,106,0,0.22);

  /* ── Shadow ── */
  --shadow-sm:  0 2px 12px rgba(0,0,0,0.5);
  --shadow-md:  0 8px 32px rgba(0,0,0,0.6);
  --shadow-lg:  0 20px 60px rgba(0,0,0,0.7);

  /* ── Radius ── */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  20px;

  /* ── Typography ── */
  --font-display: 'Space Grotesk', 'Pretendard', sans-serif;
  --font-body:    'Pretendard', 'Space Grotesk', -apple-system, sans-serif;
  --ls-tight:    -0.02em;
  --ls-normal:    0;
  --ls-wide:      0.06em;
  --ls-wider:     0.12em;
  --ls-widest:    0.18em;
}

/* ─── BASE ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

*::-webkit-scrollbar            { width: 3px; height: 3px; }
*::-webkit-scrollbar-track      { background: transparent; }
*::-webkit-scrollbar-thumb      { background: rgba(255,106,0,0.22); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover{ background: rgba(255,106,0,0.45); }
* { scrollbar-width: thin; scrollbar-color: rgba(255,106,0,0.22) transparent; }

body {
  font-family: 'Pretendard', 'Space Grotesk', -apple-system, "Apple SD Gothic Neo", ui-sans-serif, system-ui, sans-serif;
  background: var(--bg);
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── AURORA AMBIENT ORBS ───────────────────────────────────── */
.aurora-orb {
  position: fixed; border-radius: 50%;
  pointer-events: none; z-index: 0;
  will-change: transform;
}
.aurora-1 {
  width: 720px; height: 720px;
  background: radial-gradient(circle at center, rgba(255,106,0,0.14) 0%, rgba(255,106,0,0.05) 45%, transparent 70%);
  bottom: -260px; left: -200px;
  filter: blur(70px);
  animation: aorb1 28s ease-in-out infinite alternate;
}
.aurora-2 {
  width: 560px; height: 560px;
  background: radial-gradient(circle at center, rgba(255,154,31,0.12) 0%, rgba(255,154,31,0.04) 45%, transparent 70%);
  top: -160px; right: -120px;
  filter: blur(80px);
  animation: aorb2 34s ease-in-out infinite alternate;
}
.aurora-3 {
  width: 420px; height: 420px;
  background: radial-gradient(circle at center, rgba(255,106,0,0.05) 0%, rgba(139,44,68,0.04) 55%, transparent 70%);
  top: 45%; left: 52%;
  filter: blur(100px);
  animation: aorb3 22s ease-in-out infinite alternate;
}
/* 로고 근처 전용 오브 (사이드바 상단 좌측) */
.aurora-4 {
  width: 380px; height: 380px;
  background: radial-gradient(circle at center, rgba(255,106,0,0.32) 0%, rgba(255,154,31,0.14) 40%, transparent 68%);
  top: -100px; left: -80px;
  filter: blur(48px);
  animation: aorb4 18s ease-in-out infinite alternate;
}
@keyframes aorb4 {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  50%  { transform: translate(18px, 22px) scale(1.08); opacity: 0.82; }
  100% { transform: translate(-10px, 12px) scale(0.96); opacity: 1; }
}
@keyframes aorb1 {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(50px,-30px) scale(1.07); }
  100% { transform: translate(-20px,55px) scale(0.95); }
}
@keyframes aorb2 {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(-35px,28px) scale(1.06); }
  100% { transform: translate(30px,-40px) scale(0.96); }
}
@keyframes aorb3 {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(-50px,25px) scale(1.14); }
}

/* ─── NOISE GRAIN (subtle texture) ─────────────────────────── */
.noise-overlay {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 1;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ─── LAYOUT — Tailwind CDN 의존 제거, CSS 직접 명시 ─────────── */
.app-root {
  position: relative;
  /* z-index 제거: app-root 스태킹 컨텍스트 해제 → sidebar(9999)가 root level에서 legal-footer(50) 위에 렌더 */
  display: flex;
  height: 100vh;
  overflow: hidden;
}
/* main 콘텐츠 영역 */
.app-root > main {
  flex: 1 1 0%;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* std-panels (홈/사용량): 고정 footer 아래 콘텐츠 가림 방지 */
#std-panels { padding-bottom: 38px; }
@media (max-width: 767px) { #std-panels { padding-bottom: 90px; } }
/* 모바일: 저작권 텍스트 독립 행 (footer 높이 예측 가능하게) */
@media (max-width: 767px) { .legal-copyright { display: block; width: 100%; } }

/* iOS Safari 자동 확대(줌) 차단: 입력창 폰트 16px 미만이면 포커스 시 페이지가 줌됨 → 모바일에서 16px 강제.
   인라인 font-size(13px 등)를 이기기 위해 !important 필요. checkbox/radio/range는 텍스트 입력이 아니라 제외. (CSS-Tricks 검증) */
@media (max-width: 767px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select { font-size: 16px !important; }
}

/* ─── SIDEBAR ───────────────────────────────────────────────── */
/* ── 모바일 topbar: 768px 미만에서만 표시 ── */
#mobile-topbar { display: none; }
@media (max-width: 767px) {
  #mobile-topbar { display: flex; }
}

/* ── 사이드바 레일(접힘) 모드 — 2026 아이콘 레일 + 호버 오버레이 펼침 (Phase 1) ──
   접힘=72px 아이콘만 / 호버=음수 마진으로 본문 밀림 없이 240px 오버레이 펼침 / 토글=핀(localStorage).
   데스크톱(≥768px) 한정 — 모바일은 기존 오프캔버스(translateX) 규칙 유지(미적용). */
:root { --rail-w: 72px; --side-w: 240px; }
.sidebar-toggle { position: absolute; top: -8px; right: 12px; z-index: 4; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 8px; color: #c8c8d6; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); cursor: pointer; transition: color .18s, background .18s, border-color .18s; }
.sidebar-toggle:hover { color: #FF6A00; background: rgba(255,106,0,0.14); border-color: rgba(255,106,0,0.42); }
.sidebar-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.sidebar.rail .sidebar-toggle svg { transform: rotate(180deg); }   /* 레일(접힘)=펼치기 방향(▶) */
@media (max-width: 767px) { .sidebar-toggle { display: none; } }
@media (min-width: 768px) {
  .sidebar { transition: width .22s cubic-bezier(.4,0,.2,1), min-width .22s cubic-bezier(.4,0,.2,1), margin-right .22s cubic-bezier(.4,0,.2,1); }
  .sidebar.rail { width: var(--rail-w); min-width: var(--rail-w); overflow: hidden; }
  .sidebar.rail:hover { width: var(--side-w); min-width: var(--side-w); margin-right: calc(var(--rail-w) - var(--side-w)); overflow: visible; z-index: 60; box-shadow: 8px 0 64px rgba(0,0,0,.82), inset -1px 0 0 rgba(255,106,0,.04); }
  .sidebar.rail:not(:hover) .logo-home { padding-left: 0; padding-right: 0; justify-content: center; }
  .sidebar.rail:not(:hover) .nav-btn { justify-content: center; padding-left: 0; padding-right: 0; }
  .sidebar.rail:not(:hover) .nav-btn span,
  .sidebar.rail:not(:hover) .logo-word { display: none; }
  /* 언어 드롭다운 — 레일(접힘) 시 🌐 아이콘만(nav-btn과 동일 패턴) */
  .sidebar.rail:not(:hover) .lang-dd { margin-left: 0; margin-right: 0; }
  .sidebar.rail:not(:hover) .lang-dd-btn { justify-content: center; padding-left: 0; padding-right: 0; background: none; border: none; }
  .sidebar.rail:not(:hover) .lang-dd-cur,
  .sidebar.rail:not(:hover) .lang-dd-caret { display: none; }
  /* 토글은 레일에서도 항상 노출(발견성↑) — 로고 아래 중앙 배치 */
  .sidebar.rail:not(:hover) .sidebar-toggle { position: static; margin: -8px auto 6px; }
  /* 푸터(로그인·크레딧)는 auth 행이 JS 인라인 display로 표시돼 !important로 덮어야 접힘 시 숨겨짐 */
  .sidebar.rail:not(:hover) .sidebar-footer { display: none !important; }
}

/* ── 고급 컨트롤 아코디언(.adv) — 네이티브 details 접기(Progressive Disclosure·Phase 2) ──
   JS 토글 안 되는 안정 블록만 감쌈. 기본 접힘·CSP 안전(JS 0). Chromium은 부드러운 슬라이드·타 엔진은 스냅(graceful). */
details.adv { margin-top: 10px; }
details.adv > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.09); font-size: 13px; font-weight: 600; color: #cfcfdd; user-select: none; -webkit-user-select: none; transition: background .18s, border-color .18s, color .18s; }
details.adv > summary::-webkit-details-marker { display: none; }
details.adv > summary::before { content: ''; width: 7px; height: 7px; flex-shrink: 0; border-right: 2px solid #FF6A00; border-bottom: 2px solid #FF6A00; transform: rotate(-45deg); transition: transform .2s ease; }
details.adv[open] > summary::before { transform: rotate(45deg); border-color: #9b9bae; }
details.adv > summary::after { content: '펼치기'; margin-left: auto; font-size: 11px; font-weight: 700; color: #FF6A00; letter-spacing: .02em; }
details.adv[open] > summary::after { content: '접기'; color: #8a8a9a; }
/* 언어별 라벨 — CSS content 는 i18n 미적용이므로 html[lang] 속성으로 분기(용어=locale dyni8253a 일치). content 만 덮고 color/여백은 위 규칙 상속. */
html[lang="en"] details.adv > summary::after { content: 'Expand'; }
html[lang="en"] details.adv[open] > summary::after { content: 'Collapse'; }
html[lang="ja"] details.adv > summary::after { content: '展開'; }
html[lang="ja"] details.adv[open] > summary::after { content: '折りたたみ'; }
html[lang="de"] details.adv > summary::after { content: 'Ausklappen'; }
html[lang="de"] details.adv[open] > summary::after { content: 'Einklappen'; }
html[lang="pt"] details.adv > summary::after { content: 'Expandir'; }
html[lang="pt"] details.adv[open] > summary::after { content: 'Recolher'; }
html[lang="es"] details.adv > summary::after { content: 'Expandir'; }
html[lang="fr"] details.adv > summary::after { content: 'Développer'; }
html[lang="es"] details.adv[open] > summary::after { content: 'Contraer'; }
html[lang="fr"] details.adv[open] > summary::after { content: 'Réduire'; }
details.adv > summary:hover { background: rgba(255,106,0,0.09); border-color: rgba(255,106,0,0.34); color: #f5f5f0; }
details.adv[open] > summary { background: rgba(255,106,0,0.06); border-color: rgba(255,106,0,0.2); }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  details.adv::details-content { height: 0; overflow: clip; transition: height .24s ease, content-visibility .24s allow-discrete; }
  details.adv[open]::details-content { height: auto; }
}

/* ── 명령 팔레트(⌘K) — 빠른 탭 이동 (Phase 3) ── */
.cmdk-trigger { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: #8a8a9e; width: 100%; font-size: 13px; font-weight: 500; font-family: var(--font-body); cursor: pointer; transition: color .18s, background .18s, border-color .18s; margin-bottom: 4px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.08); }
.cmdk-trigger:hover { background: rgba(255,106,0,0.09); color: #d6d6e2; border-color: rgba(255,106,0,0.32); }
.cmdk-trigger .nav-ic { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cmdk-kbd { margin-left: auto; font-size: 10px; color: #8a8a9e; border: 1px solid rgba(255,255,255,0.16); border-radius: 4px; padding: 1px 5px; font-family: ui-monospace, "SF Mono", monospace; }
@media (min-width: 768px) {
  .sidebar.rail:not(:hover) .cmdk-trigger { justify-content: center; padding-left: 0; padding-right: 0; }
  .sidebar.rail:not(:hover) .cmdk-trigger span, .sidebar.rail:not(:hover) .cmdk-kbd { display: none; }
}
.cmdk-overlay { position: fixed; inset: 0; z-index: 9998; background: rgba(0,0,0,0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; align-items: flex-start; justify-content: center; padding-top: 14vh; }
.cmdk-overlay[hidden] { display: none; }
.cmdk-box { width: min(560px, 92vw); background: #121214; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; box-shadow: 0 24px 80px rgba(0,0,0,0.7); overflow: hidden; }
.cmdk-input { width: 100%; box-sizing: border-box; padding: 16px 18px; font-size: 15px; color: #fafafa; background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,0.08); outline: none; font-family: inherit; }
.cmdk-list { max-height: 50vh; overflow-y: auto; padding: 6px; }
.cmdk-item { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-radius: 9px; font-size: 14px; color: #cfcfdd; cursor: pointer; }
.cmdk-item .nav-ic { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cmdk-item.active, .cmdk-item:hover { background: rgba(255,106,0,0.14); color: #fff; }
.cmdk-item.active .nav-ic, .cmdk-item:hover .nav-ic { stroke: #FF6A00; }
.cmdk-empty { padding: 18px; text-align: center; color: #72728A; font-size: 13px; }
.cmdk-foot { padding: 9px 14px; border-top: 1px solid rgba(255,255,255,0.06); font-size: 11px; color: #72728A; }

/* ── Sidebar: Premium SaaS Navigation ── */
.sidebar {
  background: rgba(5,5,7,0.98);
  backdrop-filter: blur(48px) saturate(1.8);
  -webkit-backdrop-filter: blur(48px) saturate(1.8);
  border-right: 1px solid rgba(255,255,255,0.045);
  box-shadow: 6px 0 64px rgba(0,0,0,0.72), inset -1px 0 0 rgba(255,106,0,0.04);
  display: flex;
  flex-direction: column;
  position: relative;
  width: 240px;
  min-width: 240px;
}
.sidebar > * { position: relative; z-index: 1; }

/* 데스크톱: 사이드바 부모가 h-screen+overflow-hidden 이므로 창이 낮으면 footer(로그인/회원가입)가 잘림.
   nav만 남는 공간을 채우며 세로 스크롤 → footer는 항상 바닥 고정 노출. (모바일은 아래 규칙서 사이드바 자체 스크롤) */
@media (min-width: 768px) {
  #nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
}

@media (max-width: 767px) {
  .sidebar {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: 240px;
    z-index: 9999;
    transform: translateX(-100%);
    transition: transform 0.26s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    overflow-x: hidden;   /* 좌우 스크롤(가로 흔들림) 차단 — overflow-y만 지정 시 overflow-x가 auto로 계산되는 문제 */
    padding-bottom: 80px; /* legal-footer(fixed) 높이 확보 */
  }
  .sidebar.sidebar-open { transform: translateX(0) !important; }
}

/* 로고 glow — 드라마틱한 orange radial */
.logo-glow {
  position: absolute !important;
  top: 0; left: 0;
  width: 240px; height: 210px;
  background: radial-gradient(ellipse at 26% 22%,
    rgba(255,106,0,0.58) 0%,
    rgba(255,154,31,0.26) 36%,
    rgba(139,44,68,0.10) 58%,
    transparent 72%);
  pointer-events: none;
  z-index: 0 !important;
  animation: logo-glow-pulse 5s ease-in-out infinite alternate;
}
@keyframes logo-glow-pulse {
  0%   { opacity: 1;    transform: scale(1); }
  100% { opacity: 0.68; transform: scale(1.12); }
}

.logo-svg {
  filter: drop-shadow(0 0 10px rgba(255,106,0,0.62)) drop-shadow(0 2px 20px rgba(255,106,0,0.26));
  transition: filter .3s ease;
  display: block;
}
.logo-svg:hover {
  filter: drop-shadow(0 0 20px rgba(255,106,0,0.88)) drop-shadow(0 2px 32px rgba(255,106,0,0.42));
}
/* H icon card: 브랜드 보드 기준 */
.logo-icon-card {
  background: linear-gradient(145deg, #200E04 0%, #100804 55%, #0B0B0D 100%);
  border: 1px solid rgba(255,106,0,0.32);
  border-radius: 10px;
  padding: 2px;
  box-shadow:
    0 0 28px rgba(255,106,0,0.26),
    0 0 0 1px rgba(255,154,31,0.08) inset,
    0 4px 20px rgba(0,0,0,0.75);
  flex-shrink: 0;
  transition: box-shadow .28s, border-color .28s;
}
.logo-icon-card:hover {
  border-color: rgba(255,106,0,0.58);
  box-shadow: 0 0 40px rgba(255,106,0,0.42), 0 0 0 1px rgba(255,154,31,0.14) inset, 0 4px 24px rgba(0,0,0,0.8);
}

/* Wordmark */
.logo-word {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px; letter-spacing: .16em;
  text-transform: uppercase;
  color: #FF6A00; font-weight: 700;
  text-shadow: 0 0 22px rgba(255,106,0,0.52);
}

/* Nav buttons */
.nav-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px;
  color: #72728A; text-align: left; width: 100%;
  font-size: 13px; font-weight: 500;
  font-family: var(--font-body);
  transition: color .18s, background .18s, transform .14s;
  position: relative;
  touch-action: manipulation;
  letter-spacing: 0.01em;
  line-height: 1;
}
.nav-btn span {
  display: flex;
  align-items: center;
  line-height: 1;
}
.nav-btn:hover {
  background: rgba(255,255,255,0.032);
  color: #CACAD8;
  transform: translateX(2px);
}
/* Active nav item */
.nav-active {
  background: linear-gradient(135deg,
    rgba(255,106,0,0.16) 0%,
    rgba(255,154,31,0.06) 55%,
    transparent 100%);
  color: #F5F5F0;
}
.nav-active::after {
  content: '';
  position: absolute; top: 18%; bottom: 18%; left: 0; width: 3px;
  background: linear-gradient(180deg, rgba(255,154,31,0.9), #FF6A00, rgba(139,44,68,0.8));
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 14px rgba(255,106,0,0.75);
  pointer-events: none;
}
.nav-active span { color: #F0F0EE; font-weight: 600; }
.nav-ic {
  width: 16px; height: 16px; flex-shrink: 0;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .15s, stroke .18s;
  display: block;
}
.nav-btn:hover .nav-ic { transform: scale(1.08); stroke: rgba(255,106,0,0.65); }
.nav-active .nav-ic { stroke: var(--acc); filter: drop-shadow(0 0 5px rgba(255,106,0,0.52)); }

/* nav 하단 */
#nav::after {
  content: '';
  display: block;
  height: 1px;
  margin: 5px 12px;
  background: linear-gradient(90deg, transparent, rgba(139,44,68,0.22), transparent);
}

/* ─── PANEL TRANSITION ──────────────────────────────────────── */
section:not(.hidden) { animation: panelIn .2s ease-out both; }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── TYPOGRAPHY — HFLUX Cinematic System ───────────────────── */
.panel-title {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700;
  letter-spacing: var(--ls-tight);
  color: var(--text-1); line-height: 1.2;
  text-transform: uppercase;
}
.panel-sub {
  font-size: 11px; color: var(--text-3); margin-top: 5px;
  line-height: 1.55; letter-spacing: var(--ls-wide);
  text-transform: uppercase; font-weight: 500;
}
/* Studio section header */
.studio-title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: var(--ls-tight) !important;
  text-transform: uppercase !important;
}

/* ─── CARDS ─────────────────────────────────────────────────── */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-top-color: rgba(255,255,255,0.08);
  border-radius: var(--r-xl); padding: 24px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    var(--shadow-md),
    0 0 0 0 transparent;
  position: relative; overflow: hidden;
  transition: border-color .25s, box-shadow .25s, transform .2s;
}
.card:hover {
  border-color: rgba(255,106,0,0.14);
  box-shadow: var(--shadow-md), 0 0 40px -12px rgba(255,106,0,0.18);
  transform: translateY(-1px);
}
/* Top highlight line */
.card::before {
  content: '';
  position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
  pointer-events: none;
}

/* 생성 누적 묶음 — 새 생성이 위로 쌓일 때 생성 단위 구분(최신 위). 2번째 이후 묶음 위에 구분선. */
.result-group + .result-group,
.result-group ~ .result-group {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed rgba(255,255,255,0.12);
}
/* 이미지 라이트박스 — 생성 이미지 클릭 시 확대(전체화면). 모든 탭 공통. */
.result-card img, .sb-panel-frame img { cursor: zoom-in; }
.img-lightbox {
  position: fixed; inset: 0; z-index: 10005;   /* 인물 모달(.pm-backdrop 10002) 위에 떠야 이미지 크게보기가 안 가려짐 */
  background: rgba(0,0,0,0.92);
  display: none; align-items: center; justify-content: center;
  cursor: zoom-out; padding: 24px;
}
.img-lightbox.open { display: flex; }
.img-lightbox img {
  max-width: 95vw; max-height: 95vh; object-fit: contain;
  border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
/* 텍스트 카드 클릭 → 전체 보기 모달(이미지 라이트박스처럼) */
.lib-card-text pre { cursor: zoom-in; }
.txt-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.88);
  display: none; align-items: center; justify-content: center; padding: 32px;
}
.txt-lightbox.open { display: flex; }
.txt-lb-box {
  background: #18181b; border: 1px solid rgba(255,255,255,0.12); border-radius: 12px;
  max-width: 920px; width: 100%; max-height: 86vh; display: flex; flex-direction: column;
  padding: 16px 18px; box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
.txt-lb-bar { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-bottom: 10px; }
.txt-lb-pre {
  white-space: pre-wrap; word-break: break-word; overflow-y: auto;
  font-size: 14px; line-height: 1.75; color: #fafafa; margin: 0; flex: 1; min-height: 0;
}
/* 영상·오디오 크게 보기 모달(이미지 라이트박스처럼) */
.media-lightbox {
  position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.9);
  display: none; align-items: center; justify-content: center; padding: 32px;
}
.media-lightbox.open { display: flex; }
.media-lb-inner { max-width: 92vw; max-height: 92vh; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.media-lightbox video { max-width: 92vw; max-height: 84vh; border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,0.6); background: #000; }
.media-lightbox audio { width: min(560px, 88vw); }
/* fx-mode = Video Effects 템플릿 미리보기 — Shorts 미리보기(.sh-canvas)와 동일한 배경·위치 톤 적용 */
.media-lightbox.fx-mode .media-lb-inner { max-width: 94%; }
.media-lb-fx-head { text-align: center; margin-bottom: 2px; }
.media-lightbox.fx-mode .media-lb-fx-canvas { position: relative; aspect-ratio: 9 / 16; height: min(calc(100vh - 260px), 72vh); width: auto; max-width: 94vw; margin: 0 auto; background: #0B0B0F; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,106,0,0.35); box-shadow: 0 24px 70px rgba(0,0,0,0.55), 0 0 50px rgba(255,106,0,0.13); }
.media-lightbox.fx-mode .media-lb-fx-canvas video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; border-radius: 0; box-shadow: none; background: #000; }
.media-lb-name { color: #fafafa; font-size: 14px; text-align: center; word-break: break-all; max-width: 88vw; }
.media-lb-close { position: absolute; top: 20px; right: 24px; cursor: pointer; }
/* 라이트박스 좌우 이동 화살표 (이미지·영상 공통 — 프레임 변경 없이 오버레이) */
.img-lightbox .lb-nav, .media-lightbox .lb-nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%; padding: 0;
  background: rgba(0,0,0,0.42); border: 1px solid rgba(255,255,255,0.25);
  color: #fff; font-size: 30px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; z-index: 2;
  transition: background .15s ease, transform .15s ease;
}
.img-lightbox .lb-nav:hover, .media-lightbox .lb-nav:hover { background: rgba(0,0,0,0.72); transform: translateY(-50%) scale(1.06); }
.img-lightbox .lb-prev, .media-lightbox .lb-prev { left: 24px; }
.img-lightbox .lb-next, .media-lightbox .lb-next { right: 24px; }
.img-lightbox .lb-nav.hidden, .media-lightbox .lb-nav.hidden { display: none; }
@media (max-width: 640px) { .img-lightbox .lb-nav, .media-lightbox .lb-nav { width: 44px; height: 44px; font-size: 26px; } .img-lightbox .lb-prev, .media-lightbox .lb-prev { left: 10px; } .img-lightbox .lb-next, .media-lightbox .lb-next { right: 10px; } }
/* 결제 토스트 — 하단 부드러운 안내(브라우저 alert 대체) */
.pay-toast { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(16px); z-index: 10050; max-width: min(440px, 92vw); padding: 13px 18px; border-radius: 12px; font-size: 14px; line-height: 1.5; color: #fafafa; background: rgba(24,24,27,0.96); border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 14px 36px -14px rgba(0,0,0,0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease; text-align: center; }
.pay-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.pay-toast.ok { border-color: rgba(34,197,94,0.5); }
.pay-toast.err { border-color: rgba(248,113,113,0.55); }
.pay-toast.info { border-color: rgba(255,106,0,0.5); }

/* 크레딧 부족 모달 팩 그리드 — 데스크탑 4열, 모바일 2열(찌그러짐 방지) */
.credit-pack-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 20px; }
@media (max-width: 560px) { .credit-pack-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* 전역 Style DNA · CTA 모달 */
.sd-modal { position: fixed; inset: 0; z-index: 10002; background: rgba(6,7,7,0.9); display: none; align-items: center; justify-content: center; padding: 24px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sd-modal.open { display: flex; }
.sd-box { max-width: 560px; width: 100%; max-height: 88vh; overflow-y: auto; background: #101012; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 22px; }
.sd-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sd-head h2 { font-size: 16px; font-weight: 700; color: #fafafa; margin: 0; display: flex; align-items: center; gap: 8px; }
.sd-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #d4d4d8; cursor: pointer; }
.sd-actions { display: flex; gap: 8px; margin-top: 16px; }
.sd-on-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; display: inline-block; margin-left: auto; align-self: center; flex-shrink: 0; }
/* 탭별 Style DNA 버튼 — 미적용=주황(.dl 기본) / 적용=초록 */
.sd-open-btn.sd-on { background: rgba(34,197,94,0.2) !important; border-color: rgba(34,197,94,0.6) !important; color: #22c55e !important; }
.sd-open-btn.sd-on:hover { background: rgba(34,197,94,0.3) !important; color: #4ade80 !important; }
/* 이미지 탭 서브탭(단일 / 첫·끝 프레임 FLF) */
.img-mode-tabs { display: flex; gap: 6px; margin-bottom: 14px; background: rgba(255,255,255,0.04); padding: 4px; border-radius: 10px; }
.img-mode-btn { flex: 1; padding: 8px 6px; border: none; background: transparent; color: var(--text-2); border-radius: 7px; cursor: pointer; font-size: 13px; font-weight: 600; transition: background .15s, color .15s; }
.img-mode-btn.active { background: rgba(255,106,0,0.18); color: #FF6A00; }
/* 마스터 전용 메뉴 — 라벨을 주황색으로 표시(MASTER 뱃지 대체). 비마스터는 요소 자체가 숨겨짐. */
.nav-btn[data-admin-only] span { color: #FF6A00; }
/* 오디오 탭 모드탭 4종(생성·영상 효과음·음성 변환·보이스 설계) — 좁은 패널 라벨 줄바꿈 깨짐 방지: 2열 행·열 정렬. 비마스터(생성 1개)는 flex-grow로 전체 폭 자동. 각 버튼 아웃라인=4개 분별. */
[data-panel="audio"] .img-mode-tabs { flex-wrap: wrap; }
[data-panel="audio"] .img-mode-btn { flex: 1 1 calc(50% - 6px); white-space: nowrap; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.03); }
[data-panel="audio"] .img-mode-btn.active { border-color: rgba(255,106,0,0.5); background: rgba(255,106,0,0.18); }
/* 관리자 탭 모드탭 4종(회원·접속·매출·작업) — 버튼 테두리로 분별(오디오 탭과 동일 패턴). */
[data-panel="admin"] .img-mode-btn { border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.03); }
[data-panel="admin"] .ud-section-title { color: #e4e4e7; }   /* 기본 --text-3(#4A4A50)가 어두워 안 보임 — usage 탭(3883행)과 동일 밝기. 인라인 색(실제손익 초록)은 그대로 우선. */
[data-panel="admin"] .img-mode-btn.active { border-color: rgba(255,106,0,0.5); background: rgba(255,106,0,0.18); }
/* H STUDIO 모드탭 4종(Shorts·Avatar·Motion Control·Video Effects) — 오디오 탭과 동일 2열 테두리(긴 라벨 줄바꿈·흐릿함 방지·탭 분별). */
[data-panel="hstudio"] .img-mode-tabs { flex-wrap: wrap; }
[data-panel="hstudio"] .img-mode-btn { flex: 1 1 calc(50% - 6px); white-space: nowrap; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.03); }
[data-panel="hstudio"] .img-mode-btn.active { border-color: rgba(255,106,0,0.5); background: rgba(255,106,0,0.18); }
/* 이미지·비디오 결과 갤러리 뷰(통일) — 큰 메인 + 하단 썸네일 스트립, 한 페이지 fit(밑 안 짤림). 토글: 갤러리/썸네일. */
[data-panel="image"] .studio-out-inner, [data-panel="video"] .studio-out-inner, [data-panel="upscale"] .studio-out-inner { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; }   /* upscale 추가 2026-07-25 — 갤러리 메인이 남은 높이를 채워 비디오 탭과 동일 크기가 되도록 */
/* prompt 결과 세로 중앙 정렬: 내용 적으면 중앙, 많으면 margin:auto가 0처럼 동작해 상단 잘림 없이 스크롤 */
[data-panel="prompt"] .studio-out-inner { display: flex; flex-direction: column; min-height: calc(100vh - 200px); box-sizing: border-box; }
[data-panel="prompt"] #pr-out { margin: auto 0; width: 100%; }
/* 라이브러리 PC 파일 불러오기 액션 + 검색/정렬/선택 */
.lib-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.lib-actions .dl { cursor: pointer; }
.lib-actions input.sel { min-width: 0; }
.lib-actions { flex-direction: column; align-items: stretch; gap: 8px; }
.lib-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* 선택 벌크 도구 = 선택 버튼 아래 팝오버(사용자 지시 2026-07-20) — 표시 토글은 기존 hidden 클래스 그대로(app.js renderLib 무변경)·시각 스펙=.chip-pop verbatim(693행) */
.lib-selwrap { position: relative; display: inline-flex; }
#lib-sel-tools { position: absolute; top: 100%; left: 0; margin-top: 6px; z-index: 60; display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 130px; background: #1a1b1f; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 6px; box-shadow: 0 12px 30px -10px rgba(0,0,0,0.7); }
#lib-sel-tools.hidden { display: none; } /* ID 룰이 .hidden(클래스)보다 우선이라 결합 셀렉터로 숨김 보장 — 선택 모드 토글(app.js renderLib) */
#lib-sel-tools .dl { justify-content: center; }
#lib-sel-count { text-align: center; }
/* 라이브러리 버튼 전부 칩 통일 — .chip-sel 시각 스펙 verbatim(689행)·라이브러리 한정(타 탭 .dl 무영향) (2026-07-20) */
.lib-actions .dl {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  color: #e4e4e7; font-size: 13px; font-weight: 600;
  padding: 12px 14px; border-radius: var(--r-md); line-height: 1; gap: 7px;
}
.lib-actions .dl:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.1); color: #e4e4e7; }
.lib-actions .chip-wrap { width: auto; }
.lib-actions .chip-sel { width: auto; }
.lib-del { color: #f87171; }
.lib-del:hover { background: rgba(248,113,113,0.14); border-color: rgba(248,113,113,0.45); }
.result-card.lib-selectable { position: relative; cursor: pointer; }
.lib-chk { position: absolute; top: 10px; left: 10px; width: 20px; height: 20px; z-index: 5; cursor: pointer; accent-color: #FF6A00; }
.lib-card-text { padding: 14px; }
.lib-card-text pre { white-space: pre-wrap; word-break: break-word; font-size: 12px; line-height: 1.6; max-height: 158px; overflow-y: auto; margin: 0 0 8px; color: var(--text-1); }   /* 158px=액션 오버레이 전환 후 실측 재보정(170px 적용 시 237px로 이미지 카드 225px보다 12px 커 .lib-card-text padding 차이 반영해 158px로 축소) (2026-07-21 사용자 지시) */
.lib-badge { display: inline-block; font-size: 10px; padding: 2px 7px; border-radius: 999px; margin-bottom: 6px; }
.lib-badge.saved { background: rgba(34,197,94,0.16); color: #22c55e; }
.lib-badge.session { background: rgba(234,179,8,0.16); color: #eab308; }
.lib-badge.perm { background: rgba(255,106,0,0.16); color: #FF6A00; }
/* 라이브러리 툴바 모바일 정렬 — 8개 칩(전체·선택·검색·기간·최신순·첨부·전체저장·전체삭제)이 flex-wrap 자연배치라 줄마다 폭이 들쭉날쭉 → 2열 그리드로 정리(검색만 전체폭). 인라인 max-width(170/200/120/130px)는 모바일에서 해제해 그리드 셀을 꽉 채움 (2026-07-21 사용자 지시) */
@media (max-width: 767px) {
  #lib-actions .lib-row > * { flex: 1 1 calc(50% - 4px); justify-content: center; }
  #lib-actions .lib-row #lib-search { flex-basis: 100%; }
  #lib-actions .lib-row .lib-selwrap { display: flex; }
  #lib-actions .lib-row .lib-selwrap #lib-selmode { flex: 1 1 auto; justify-content: center; }
  #lib-cat, #lib-search, #lib-f-date, #lib-sort { max-width: none !important; }
}
.img-view-toggle { flex: 0 0 auto; display: flex; gap: 6px; }
/* 뷰 토글(갤러리·썸네일·전체 삭제) = 라이브러리 칩 색상 통일 (2026-07-20 사용자 지시) */
.img-view-toggle .dl { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); color: #e4e4e7; }
.img-view-toggle .dl:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.1); color: #e4e4e7; }
.img-view-toggle .dl.active { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.22); color: #fff; }
.img-gallery { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.img-gallery .img-main { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.img-gallery .img-main img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }   /* width/height 명시 = img-main flex 높이를 box 로 전달(img 는 video 와 달리 intrinsic 크기 없어 collapse→가로 띠 방지) */
.img-gallery .img-main video { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }   /* width/height 100% = poster(작은 썸네일)가 intrinsic 크기를 축소시켜도 영역 채움(비율 contain 유지) — img(573)과 동일 처리 */
.img-gallery .img-main img { cursor: zoom-in; }
.img-gallery .img-main-dl { flex: 0 0 auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.img-gallery .img-strip { flex: 0 0 auto; height: 84px; display: flex; gap: 8px; overflow-x: auto; padding: 2px 0; }
.img-gallery .img-strip img, .img-gallery .img-strip video { height: 78px; width: auto; object-fit: cover; border-radius: 6px; cursor: pointer; opacity: 0.55; border: 2px solid transparent; flex: 0 0 auto; }
/* poster 가 없는 video(업스케일 Pro = HEVC Rext 라 디코딩 불가 → 포스터 생성 실패)는 intrinsic 크기가
   없어 width:auto 가 351px·304px 처럼 제멋대로 늘어난다(2026-07-25 실측) → JS 가 붙이는 .media-err 로
   비디오 탭 썸네일과 같은 16:9(높이 78px 기준 138.7px)로 고정한다. poster 확보 시 클래스 제거. */
.img-gallery .img-strip video.media-err { aspect-ratio: 16 / 9; width: auto; background: rgba(255,255,255,0.06); }
.img-gallery .img-strip img.sel, .img-gallery .img-strip video.sel { opacity: 1; border-color: #FF6A00; }
.img-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; align-content: start; }
.result-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-top-color: rgba(255,255,255,0.07);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-sm), 0 4px 24px rgba(0,0,0,0.45);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s;
}
.result-card:hover {
  transform: translateY(-5px) scale(1.006);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,106,0,0.22), var(--glow-sm);
  border-color: rgba(255,106,0,0.22);
}
.result-card img, .result-card video { width: 100%; display: block; }
/* 스톡·라이브러리·이미지 그리드 썸네일 고정 비율 + cover — 원본 크기 무관하게 카드 꽉 채움(이미지 비율 제각각이어도 통일·찌그러짐 방지) */
.media-grid .result-card img, .img-grid .result-card img, .home-lib-grid .result-card img {
  height: 180px;
  object-fit: cover;
  object-position: center;
}
/* 홈 "최근 생성물" 영상 썸네일도 이미지와 동일 180px cover — poster 원본비율로 카드 높이가 제각각(하단 검정 여백)이던 것 통일 (2026-07-22) */
.home-lib-grid .result-card video {
  height: 180px;
  width: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* 카드 액션 푸터 — 아이콘 균등열(다운로드·크게보기·삭제). 미디어 카드(이미지·비디오·오디오) 공통. MD3 이미지리스트 아이콘버튼 패턴: 2~3개 아이콘 동일폭 1줄로 균형(줄바꿈·빈칸 제거)·툴팁(title)·삭제 적색 분리. */
.card-acts { display: flex; align-items: center; gap: 6px; padding: 10px 12px 12px; }
.card-acts .dl { flex: 1 1 0; justify-content: center; gap: 0; padding: 9px 0; }
.card-acts .dl svg { display: block; }
.card-acts .dl.lib-del { color: #f87171; border-color: rgba(248,113,113,0.2); background: rgba(248,113,113,0.05); }
.card-acts .dl.lib-del:hover { color: #fff; background: rgba(248,113,113,0.16); border-color: rgba(248,113,113,0.5); }
/* 라이브러리 카드 액션(허용·삭제·다운로드·크게보기 아이콘) = "전체" 칩 텍스트색(#e4e4e7)으로 통일 — 라이브러리 한정(#lib-out)·타 탭 갤러리 무영향 (2026-07-20 사용자 지시) */
:is(#lib-out,#img-out,#vid-out,#aud-out,#ups-out) .card-acts .dl, :is(#lib-out,#img-out,#vid-out,#aud-out,#ups-out) .card-acts .dl.lib-del { color: #e4e4e7; background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
:is(#lib-out,#img-out,#vid-out,#aud-out,#ups-out) .card-acts .dl:hover, :is(#lib-out,#img-out,#vid-out,#aud-out,#ups-out) .card-acts .dl.lib-del:hover { color: var(--acc); background: rgba(255,106,0,0.1); border-color: rgba(255,106,0,0.3); }   /* hover=주황(사용자 지시 2026-07-20) */
/* FLOW·SCENE SHOT 조작(위로·아래로·위삽입·아래삽입·분할·삭제·되돌리기)·프레임복사(첫/끝 프레임·비디오 프롬프트) 버튼 = 라이브러리 카드 액션 칩과 동일 색상(라인 639-640 값 재사용). renderScenario 공유라 scenario(FLOW)·hscene(SCENE) 양쪽에 적용. "SHOT 편집"(.hs-edit-shot)은 별개 클래스라 기존 주황 유지(사용자 지시 2026-07-21) */
:is([data-panel="scenario"],[data-panel="hscene"]) .dl.hs-shot-op, :is([data-panel="scenario"],[data-panel="hscene"]) .dl.sc-cp-btn { color: #e4e4e7; background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
:is([data-panel="scenario"],[data-panel="hscene"]) .dl.hs-shot-op:hover, :is([data-panel="scenario"],[data-panel="hscene"]) .dl.sc-cp-btn:hover { color: var(--acc); background: rgba(255,106,0,0.1); border-color: rgba(255,106,0,0.3); }
/* 라이브러리 카드 하단 액션 위치 통일 — 카드를 세로 flex로, 하단 액션(허용/삭제·오디오)을 맨 아래 정렬해 이미지/영상 오버레이 아이콘과 같은 높이 (2026-07-20 사용자 지시) */
:is(#lib-out,#img-out,#vid-out,#aud-out,#ups-out) .result-card { display: flex; flex-direction: column; }
:is(#lib-out,#img-out,#vid-out,#aud-out,#ups-out) .result-card > .card-acts { margin-top: auto; }
/* 이미지 카드: 액션(다운로드·삭제)을 썸네일 하단에 오버레이 (2026-07-20 사용자 지시) */
:is(#lib-out,#img-out,#vid-out,#aud-out,#ups-out) .lib-img-wrap { position: relative; line-height: 0; }
/* 영상 썸네일(poster)도 이미지와 동일 180px cover — poster 원본비율로 카드 높이가 제각각이 되어 오버레이 위치가 어긋나던 것 통일 (2026-07-20) */
:is(#lib-out,#img-out,#vid-out,#aud-out,#ups-out) .lib-img-wrap video { height: 180px; width: 100%; object-fit: cover; object-position: center; display: block; }
/* 영상 카드 중앙 재생 화살표(▶) — 클릭 시 라이트박스 재생 (2026-07-20 사용자 지시) */
:is(#lib-out,#img-out,#vid-out,#aud-out,#ups-out) .lib-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 46px; height: 46px; border-radius: 999px; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; padding: 0; transition: background .15s; }
:is(#lib-out,#img-out,#vid-out,#aud-out,#ups-out) .lib-play:hover { background: rgba(0,0,0,0.72); }
:is(#lib-out,#img-out,#vid-out,#aud-out,#ups-out) .lib-play svg { margin-left: 2px; }
:is(#lib-out,#img-out,#vid-out,#aud-out,#ups-out) .card-acts.card-acts-ov { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px; background: linear-gradient(to top, rgba(0,0,0,0.62), transparent); }
:is(#lib-out,#img-out,#vid-out,#aud-out,#ups-out) .card-acts.card-acts-ov .dl { background: transparent; border-color: transparent; opacity: 1; }   /* 아이콘 뒤 네모 박스 제거·오파시티 100%(밝은 사진 위 가독성·사용자 지시 2026-07-20) */
:is(#lib-out,#img-out,#vid-out,#aud-out,#ups-out) .card-acts.card-acts-ov .dl:hover { background: transparent; border-color: transparent; opacity: 1; color: var(--acc); }   /* 오버레이 아이콘 hover=주황(사용자 지시 2026-07-20) */
/* 오디오 탭 카드 버튼(개별 .dl — card-acts 아님: 다운로드·원본저장·삭제) 색상도 라이브러리 통일 (2026-07-20 사용자 지시) */
#aud-out .result-card .dl { color: #e4e4e7; background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
#aud-out .result-card .dl:hover { color: var(--acc); background: rgba(255,106,0,0.1); border-color: rgba(255,106,0,0.3); }
/* 텍스트 생성물 카드 버튼(라이브러리 텍스트 카드 복사/TXT + 프롬프트 탭 TXT/JSON/복사) 색상 통일 (2026-07-20 사용자 지시) */
#lib-out .lib-card-text .dl, #pr-out .result-group .dl { color: #e4e4e7; background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
#lib-out .lib-card-text .dl:hover, #pr-out .result-group .dl:hover { color: var(--acc); background: rgba(255,106,0,0.1); border-color: rgba(255,106,0,0.3); }
.dl.dl-busy { opacity: 0.45; pointer-events: none; }

/* ─── FORM ELEMENTS ─────────────────────────────────────────── */
.lbl {
  display: block; font-size: 10.5px; font-weight: 600;
  color: var(--text-3); margin-bottom: 7px;
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  font-family: var(--font-display);
}
/* 시안 미리보기 토글 — .lbl(10.5px 흐림)은 시인성 낮아 주황 강조 박스로 교체 */
.sb-draft-toggle {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--text-1);
  background: rgba(255,106,0,0.08); border: 1px solid rgba(255,106,0,0.45);
  border-radius: 8px; padding: 9px 12px; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.sb-draft-toggle:hover { background: rgba(255,106,0,0.14); border-color: rgba(255,106,0,0.7); }
.sb-draft-toggle:has(input:checked) { background: rgba(255,106,0,0.18); border-color: #FF6A00; }
.sb-draft-toggle input { width: 15px; height: 15px; accent-color: #FF6A00; flex-shrink: 0; cursor: pointer; }

.sel, .ta {
  width: 100%;
  background: rgba(10,11,14,0.9);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--r-md); padding: 10px 13px;
  color: var(--text-1); font-size: 13.5px; outline: none;
  transition: border-color .18s, box-shadow .18s, background .18s;
  font-family: var(--font-body);
}
.sel:focus, .ta:focus {
  border-color: rgba(255,106,0,0.45);
  background: rgba(12,13,16,0.95);
  box-shadow: 0 0 0 3px rgba(255,106,0,0.08), var(--glow-sm);
}
.ta { resize: vertical; line-height: 1.65; }

/* Custom select arrow */
.sel {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2352525b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}
/* URL 텍스트 입력 — .sel 박스/포커스 스타일 재사용, 셀렉트 화살표만 제거(실제 드롭다운 아님) (2026-07-19) */
.sel.no-arrow { background-image: none; padding-right: 13px; cursor: text; }

/* 빠른 설정 칩 행 — 종횡비·해상도·길이 컴팩션(스코프 한정·디자인 시스템 유지: 색·라운드·화살표 동일, 간격/높이만 축소) (2026-07-17) */
.chip-row { gap: 6px; flex-wrap: wrap; }   /* 칩 값이 폭을 넘으면 다음 줄로(잘림 방지·전 언어) */
.chip-row .lbl { margin-bottom: 4px; }
.chip-row select.sel { padding: 8px 12px; padding-right: 30px; font-size: 13px; }   /* 숨김 select 전용 — .chip-pop-opt.sel(선택된 팝오버 옵션) 오매칭 방지(태그 한정) (2026-07-18) */
.chip-row .lbl svg { color: var(--text-3); opacity: .85; }
.chip-row > .flex-1 { min-width: max-content; }   /* 칩/select 값 콘텐츠 폭 확보(0 압축→잘림 방지)·넘치면 chip-row wrap */
.studio-prompt-bar .chip-row { margin-top: 4px; }

/* Higgsfield식 칩 셀렉터 — native select 아이콘+값 칩화(비디오 종횡비·해상도) (2026-07-17) */
.chip-hidden-select { position:absolute!important; width:1px; height:1px; opacity:0; pointer-events:none; overflow:hidden; }
.chip-wrap { position:relative; display:block; width:100%; }
.chip-sel { display:flex; width:100%; min-width:0; align-items:center; gap:7px; padding:12px 14px; border-radius:var(--r-md); background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); color:#e4e4e7; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; line-height:1; }
.chip-sel:hover { background:rgba(255,255,255,0.09); }
.chip-sel svg { color:#a1a1aa; flex-shrink:0; }
.chip-val { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.chip-pop { position:absolute; z-index:60; bottom:100%; left:0; margin-bottom:5px; min-width:130px; background:#1a1b1f; border:1px solid rgba(255,255,255,0.12); border-radius:10px; padding:5px; box-shadow:0 12px 30px -10px rgba(0,0,0,0.7); max-height:260px; overflow:auto; }
.chip-pop-opt { padding:8px 11px; border-radius:7px; font-size:13px; color:#d4d4d8; cursor:pointer; white-space:nowrap; }
.chip-pop-opt:hover, .chip-pop-opt.act { background:rgba(255,255,255,0.08); }
.chip-pop-opt.sel { color:#FF6A00; font-weight:600; }
.chip-pop-opt-dis { opacity:.45; cursor:not-allowed; }
.chip-pop-opt-dis:hover { background:transparent; }
/* Pro JSON 옆 모델 칩 줄 (2026-07-18) — [Pro JSON 버튼] [모델 칩] 한 줄. 칩=내용 크기(full-width 아님)·긴 이름은 말줄임(팝오버는 왼쪽 flip). */
.prompt-topbar { display:flex; gap:8px; align-items:center; flex-wrap:nowrap; margin-bottom:8px; }
.prompt-topbar .pro-json { margin-bottom:0; flex:0 0 auto; }
.prompt-topbar > .chip-wrap { flex:1 1 auto; min-width:0; }   /* 모델 칩 = 남은 폭 오른쪽 끝까지 채움 */
.prompt-topbar .chip-sel { width:100%; padding:9px 12px; }
.prompt-topbar .chip-pop { left:0; right:0; min-width:0; }   /* 드롭다운 폭 = 칩 폭(좌우 일치) */
/* 오디오 생성 ON/OFF 아이콘 토글 (비디오 헤더·새로 생성 옆) */
.audio-toggle-btn { gap:0; }
.audio-toggle-btn svg { color:#a1a1aa; }
.audio-toggle-btn.on { color:#FF6A00; border-color:rgba(255,106,0,0.5); background:rgba(255,106,0,0.12); }
.audio-toggle-btn.on svg { color:#FF6A00; }

/* Range sliders */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px;
  background: rgba(255,255,255,0.09); border-radius: 4px;
  cursor: pointer; outline: none; margin: 2px 0;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: linear-gradient(135deg, var(--acc), var(--acc2));
  box-shadow: 0 0 8px rgba(255,106,0,0.42);
  cursor: pointer; transition: transform .12s, box-shadow .12s;
}
input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.18);
  box-shadow: 0 0 16px rgba(255,106,0,0.65);
}
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; border: none;
  background: linear-gradient(135deg, var(--acc), var(--acc2));
  box-shadow: 0 0 8px rgba(255,106,0,0.42); cursor: pointer;
}
input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--acc); }

.filein { width: 100%; font-size: 13px; color: var(--text-2); }
.filein::file-selector-button {
  background: rgba(255,106,0,0.12); color: var(--acc);
  border: 1px solid rgba(255,106,0,0.22); border-radius: 8px;
  padding: 7px 13px; margin-right: 10px;
  cursor: pointer; font-weight: 600; font-size: 13px;
  transition: background .15s, border-color .15s;
}
.filein::file-selector-button:hover { background: rgba(255,106,0,0.22); border-color: rgba(255,106,0,0.38); }

/* ─── BUTTONS ───────────────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, var(--acc) 0%, var(--acc2) 100%);
  color: #fff; font-weight: 700;
  font-family: var(--font-display); font-size: 13px;
  padding: 11px 24px; border-radius: var(--r-md);
  box-shadow: 0 4px 24px -4px rgba(255,106,0,0.55), 0 0 0 1px rgba(255,255,255,0.08) inset;
  position: relative; overflow: hidden;
  transition: filter .18s, transform .14s, box-shadow .18s;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
/* Shimmer sweep on hover */
.btn-primary::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.18) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .45s ease;
  pointer-events: none;
}
.btn-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 12px 36px -4px rgba(255,106,0,0.65), 0 0 0 1px rgba(255,255,255,0.1) inset, var(--glow-sm);
}
.btn-primary:hover::after { transform: translateX(120%); }
.btn-primary:active { transform: translateY(0); filter: brightness(0.98); }
/* 모바일 생성 잠금 — PC 생성 버튼과 동일 외관(주황 배경·흰 텍스트·glow 상속). 클릭만 차단·shimmer/hover 제거 */
.btn-primary.gen-pc-only { cursor: not-allowed; text-transform: none; letter-spacing: 0; filter: none; transform: none; }
.btn-primary.gen-pc-only::after { display: none; }
.btn-primary.gen-pc-only:hover { filter: none; transform: none; }
/* disabled 상태여도 PC 생성 버튼과 동일 밝기 유지 — :disabled의 opacity:.4·box-shadow:none를 특이성으로 덮음 */
.btn-primary.gen-pc-only:disabled { opacity: 1; box-shadow: 0 4px 24px -4px rgba(255,106,0,0.55), 0 0 0 1px rgba(255,255,255,0.08) inset; }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; filter: none; transform: none; box-shadow: none; }

/* 생성 버튼 안 크레딧 배지(엽전+총액) — 라벨 중앙 유지, 코인은 우측 절대배치(버튼 텍스트 교체 로직과 분리) */
.gen-cost { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 4px; background: rgba(0,0,0,0.2); border-radius: 999px; padding: 2px 8px 2px 6px; line-height: 1; pointer-events: none; }
.gen-cost b { font-size: 12px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; }
.gen-cost .coin-icon { width: 12px; height: 12px; }
/* 생성 버튼 위 추가금액 분해줄 — 소비자에게 가산 항목 명시(참조/문서/씬/시트 등) */
.cost-hint { font-size: 11px; color: var(--text-2); line-height: 1.5; margin: 4px 2px 0; font-variant-numeric: tabular-nums; }
.cost-hint b { color: var(--acc); font-weight: 700; }
.cost-hint:empty { display: none; }

.ref-add {
  background: rgba(255,106,0,0.11); color: var(--acc);
  font-weight: 600; font-size: 13px; padding: 7px 14px; border-radius: 9px;
  border: 1px solid rgba(255,106,0,0.2);
  transition: background .15s, border-color .15s;
}
.ref-add:hover { background: rgba(255,106,0,0.22); border-color: rgba(255,106,0,0.38); }
.ref-clear { color: var(--text-3); font-size: 12px; padding: 7px 10px; transition: color .15s; }
.ref-clear:hover { color: #fca5a5; }

.dl {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--acc);
  padding: 7px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(255,106,0,0.2);
  background: rgba(255,106,0,0.06);
  transition: color .15s, background .15s, border-color .15s;
}
.dl:hover { color: #fff; background: rgba(255,106,0,0.18); border-color: rgba(255,106,0,0.42); }

/* 비디오·이미지 탭 텍스트 잡음 숨김(모델배지·dims·크레딧힌트 — 칩 셀렉터로 대체·DOM은 유지=JS 무변경) (2026-07-17) */
#vid-model-badges, #vid-dims, #vid-cost-hint, #vid-dur-val, #img-model-badges, #img-dims, #img-cost-hint, #pr-cost-hint, #sb-cost-hint, #sb-scn-cost-hint, #sb-dims, #aud-cost-hint { display: none; }
.chip-row-fill .chip-pop { left: 0; right: auto; min-width: 100%; width: max-content; max-width: 92vw; }   /* 칩행 드롭다운 = 왼쪽 칩 정렬 + 최소 칩 폭 + 내용에 맞게 확장(긴 옵션 잘림 방지) (2026-07-18) */

/* ─── MISC ──────────────────────────────────────────────────── */
.dims-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--acc);
  background: rgba(255,106,0,0.08);
  border: 1px solid rgba(255,106,0,0.2); border-radius: 8px;
  padding: 5px 10px; font-variant-numeric: tabular-nums;
}
.err {
  color: #fca5a5; font-size: 13px;
  background: rgba(40,18,20,0.9);
  border: 1px solid rgba(76,29,29,0.8); border-radius: 10px;
  padding: 10px 14px; line-height: 1.5;
}
/* 정책 차단 에러 카드 — 원인 설명 포함 */
.err-block {
  background: rgba(20,14,30,0.95);
  border: 1px solid rgba(139,92,246,0.25);
  border-radius: 12px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.err-block-header {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; color: #c4b5fd;
}
.err-block-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #a78bfa; flex-shrink: 0;
}
.err-block-reason {
  font-size: 12px; color: #a1a1aa; line-height: 1.6;
  padding-left: 14px;
}
.note { color: var(--text-3); font-size: 11px; }
/* 에러카드 환불 안내 — 데스크톱은 한 줄 유지(레이아웃 지시·문구 불변), 모바일 좁은 폭은 줄바꿈 허용 */
.err-refund-note { white-space: nowrap; }
@media (max-width: 767px) { .err-refund-note { white-space: normal; } }
/* 인물 자산 라이브러리 카드 (비디오탭·지정 크리에이터 전용) */
.p-card { position: relative; border: 1px solid var(--border, #2a2a30); border-radius: 8px; padding: 8px 10px; background: rgba(255,255,255,0.02); cursor: pointer; display: flex; flex-direction: column; gap: 6px; transition: border-color .12s, background .12s; }
.p-card:hover { border-color: #FF6A00; }
.p-card.p-sel { border-color: #FF6A00; background: rgba(255,106,0,0.12); }
.p-card.p-dis { cursor: default; opacity: 0.75; }
.p-card.p-dis:hover { border-color: var(--border, #2a2a30); }
.p-thumb { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; display: block; background: rgba(255,255,255,0.04); cursor: zoom-in; }
.p-selbtn { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.55); background: transparent; color: #fff; cursor: pointer; font-size: 11px; line-height: 1; padding: 0; flex-shrink: 0; margin-right: 6px; }
.p-selbtn.on { background: #FF6A00; border-color: #FF6A00; }
.p-delc { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(0,0,0,0.55); color: #fff; cursor: pointer; font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; }
.p-delc:hover { background: #f87171; }
.p-ex-thumb { width: 74px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; cursor: zoom-in; border: 1px solid var(--border); background: rgba(255,255,255,0.04); }
#vid-portrait-name::placeholder { color: #FF6A00; opacity: 1; }   /* 이름 필수 유도 — 첨부 전 입력 안내 주황 강조 */
.p-ex-thumb:hover { border-color: #FF6A00; }
.p-zoom { position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border: none; border-radius: 6px; background: rgba(0,0,0,0.55); color: #fff; cursor: pointer; font-size: 12px; line-height: 1; display: flex; align-items: center; justify-content: center; }
/* 인물 라이브러리 모달 (바나나식·트리거 #vid-portrait-open) — sh-lib 값 재사용 */
.pm-backdrop { position: fixed; inset: 0; z-index: 10002; background: rgba(0,0,0,0.62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.pm-modal { background: #0e0f10; border: 1px solid var(--border); border-radius: 16px; width: min(680px, 100%); max-height: 86vh; display: flex; flex-direction: column; box-shadow: 0 24px 70px rgba(0,0,0,0.6); }
.pm-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.pm-body { padding: 16px 18px; overflow-y: auto; }
.pm-foot { display: flex; align-items: flex-start; gap: 7px; padding: 12px 18px; border-top: 1px solid var(--border); color: var(--text-3); }
.pm-close { background: none; border: 0; color: var(--text-2); font-size: 22px; cursor: pointer; line-height: 1; padding: 0 4px; }
.pm-close:hover { color: var(--text-1); }
/* 모달 텍스트 톤앤 — .note(--text-3 어두움) 대신 밝게·크게 */
.pm-head .lbl { color: var(--text-1); text-transform: none; letter-spacing: normal; font-size: 13.5px; }
#vid-portrait-count-m { color: var(--text-2); }
.pm-body .note { color: var(--text-1); font-size: 12.5px; line-height: 1.65; }
.pm-body #vid-portrait-list .note { color: var(--text-2); }
.pm-foot { color: var(--text-2); }
.pm-foot .note { color: var(--text-2); font-size: 12px; line-height: 1.6; }
/* 인물 추가 = 눈에 띄는 accent 버튼 */
.pm-add { background: var(--acc); color: #fff; border: none; border-radius: 8px; padding: 8px 13px; font-size: 12.5px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-family: inherit; line-height: 1; }
.pm-add:hover { filter: brightness(1.08); }
.p-card-top { display: flex; align-items: center; justify-content: flex-start; gap: 0; }
.p-name { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-del { background: none; border: none; color: var(--text-3, #85858E); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; flex-shrink: 0; }
.p-del:hover { color: #f87171; }
.p-badge { display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px; width: fit-content; }
.p-badge.p-ok { background: rgba(34,197,94,0.16); color: #4ade80; }
.p-badge.p-proc { background: rgba(234,179,8,0.16); color: #eab308; }
.p-badge.p-fail { background: rgba(248,113,113,0.16); color: #f87171; }
.p-err { margin-top: 4px; font-size: 10px; line-height: 1.4; color: #f87171; }
/* AI 생성 고지 안내문만 .note 기본(#4A4A50)보다 살짝 밝게(가독성) — 전역 .note 는 불변 */
[data-i18n="disclaimer.aiGenerated"] { color: #6E6E76; }
.opt-disabled { color: #3f3f46; }
.outbox {
  background: rgba(9,10,12,0.82);
  border: 1px solid rgba(255,255,255,0.07); border-radius: 12px;
  padding: 14px; font-size: 13px; white-space: pre-wrap;
  line-height: 1.65; color: #d4d4d8;
}

/* 시나리오 출력(#sc-out) 시인성 강화 — note/lbl 보조텍스트가 --text-3(#4A4A50)라 거의 안 보임 → --text-2(#9A9A95)로.
   #sc-out 스코프라 다른 탭 .note/.lbl 무영향. */
#sc-out .note { color: var(--text-2); font-size: 12px; }
#sc-out .lbl  { color: var(--text-2); }

/* SHOT별 제작 보드 — SHOT 헤더 + 액션 바(첫/끝 이미지·영상 생성) 레이아웃·시인성 */
.scb-cut-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.scb-cut-no { font-weight: 700; font-size: 12px; color: #FF6A00; background: rgba(255,106,0,0.12); border: 1px solid rgba(255,106,0,0.4); border-radius: 6px; padding: 1px 9px; white-space: nowrap; }
.scb-cut-slug { font-size: 11.5px; color: var(--text-2); font-weight: 600; }
.scb-cut-sec { font-size: 11px; color: var(--text-2); margin-left: auto; white-space: nowrap; }
.scb-acts { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
.scb-acts-grp { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--text-2); text-transform: uppercase; }
.scb-acts .dl { padding: 7px 14px; font-size: 12.5px; font-weight: 600; }
.scb-acts-sep { width: 1px; align-self: stretch; min-height: 22px; background: rgba(255,255,255,0.14); margin: 0 5px; }
.scb-acts .scb-vid:not(:disabled) { background: rgba(255,106,0,0.16); border-color: rgba(255,106,0,0.55); color: #FF6A00; }
.scb-acts .scb-vid:not(:disabled):hover { background: rgba(255,106,0,0.26); color: #fff; }
.scb-acts .scb-vid:disabled { opacity: 0.42; cursor: not-allowed; }

/* ─── SPINNER ───────────────────────────────────────────────── */
.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.18);
  border-top-color: #fff; border-radius: 50%;
  display: inline-block; animation: spin .65s linear infinite;
  vertical-align: -3px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── DROPZONE ──────────────────────────────────────────────── */
.dropzone {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 8px; padding: 20px 16px;
  border: 1.5px dashed rgba(255,106,0,0.28); border-radius: var(--r-lg);
  background: rgba(255,106,0,0.018); color: var(--text-3);
  font-size: 12.5px; cursor: pointer; text-align: center;
  letter-spacing: 0.01em;
  transition: border-color .22s, background .22s, color .22s, transform .18s, box-shadow .22s;
}
.dropzone:hover {
  border-color: rgba(255,106,0,0.55);
  background: rgba(255,106,0,0.06); color: var(--text-2);
  transform: scale(1.007);
  box-shadow: 0 0 20px -10px rgba(255,106,0,0.2);
}
.dropzone.dz-over {
  border-color: var(--acc);
  background: rgba(255,106,0,0.12); color: var(--text-1);
  transform: scale(1.012);
  box-shadow: 0 0 32px -8px rgba(255,106,0,0.38), var(--glow-sm);
}
.dropzone b { color: var(--acc); font-weight: 700; }
.dz-ic {
  width: 22px; height: 22px; flex-shrink: 0;
  fill: none; stroke: var(--acc);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* ─── MODEL CAPABILITY BADGES (해상도·길이 — 모델 select 아래) ── */
.model-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.model-badge { font-size: 10px; color: #c4c4cc; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; padding: 2px 7px; line-height: 1.5; }

/* ─── REF THUMBNAILS ────────────────────────────────────────── */
.ref-thumb { position: relative; aspect-ratio: 1; border-radius: 9px; overflow: hidden; border: 1px solid rgba(255,255,255,0.09); }
.ref-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.ref-thumb .x {
  position: absolute; top: 3px; right: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(0,0,0,0.75); color: #fff;
  font-size: 12px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s;
}
.ref-thumb .x:hover { background: var(--acc2); }
.frame-up { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); }

/* ─── 엽전 코인 아이콘 (토큰 표시용) ────────────────────────── */
.coin-icon {
  display: inline-block; flex-shrink: 0; vertical-align: middle;
  filter: drop-shadow(0 0 3px rgba(255,106,0,0.75)) drop-shadow(0 0 7px rgba(255,106,0,0.4));
  animation: coin-glow 2.5s ease-in-out infinite alternate;
}
@keyframes coin-glow {
  0%   { filter: drop-shadow(0 0 2px rgba(255,106,0,0.65)) drop-shadow(0 0 5px rgba(255,106,0,0.3)); }
  100% { filter: drop-shadow(0 0 6px rgba(255,106,0,0.95)) drop-shadow(0 0 14px rgba(255,106,0,0.55)); }
}

/* ─── STATUS (sidebar footer) ───────────────────────────────── */
.sidebar-footer {
  font-size: 11px; color: var(--text-3); line-height: 1.65;
  border-top: 1px solid rgba(255,255,255,0.04);
  padding-bottom: 64px;   /* legal-footer(fixed·최대 2줄 ~57px) 가림 방지 — 로그인/크레딧 영역 확보 */
}
.status-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--acc); margin-right: 5px;
  box-shadow: 0 0 5px var(--acc);
  animation: pulse-dot 3s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes pulse-dot {
  0%,100% { opacity: 1; box-shadow: 0 0 4px rgba(255,106,0,0.7); }
  50%      { opacity: 0.45; box-shadow: 0 0 9px rgba(255,106,0,0.4); }
}

/* ─── NAV DIVIDER (브랜드 레드 계열) ─────────────────────────── */
.nav-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139,44,68,0.24), transparent);
  margin: 6px 12px;
}

/* ─── STUDIO LAYOUT ─────────────────────────────────────────── */
/* Studio panels overlay the main area when active */
.studio-panel:not(.hidden) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 38px; /* fixed legal footer 높이 확보 */
  display: flex;
  flex-direction: row;
  z-index: auto;
  background: transparent;
}
@media (max-width: 1023px) {
  /* main: 태블릿·모바일은 정적 패널 스크롤
     legal-footer(fixed)가 모바일에서 사업자정보 여러 줄로 wrap되며 높이가 커짐(데스크탑 38px → 모바일 ~125px).
     app.js가 실측 높이를 --legal-footer-h에 반영 → padding-bottom이 따라가 하단 콘텐츠 가림 방지. */
  .app-root > main { overflow-y: auto; padding-bottom: calc(var(--legal-footer-h, 130px) + 18px); }
  /* studio-panel: absolute → static, column 전환
     flex:1 0 auto — grow로 짧은 콘텐츠는 화면을 채우되, shrink:0으로 긴 콘텐츠는 자연 높이를 유지해
     main(overflow-y:auto)이 스크롤된다. (기존 flex:1+min-height:0는 콘텐츠를 main 높이로 압축해
     긴 탭에서 main 스크롤이 죽고 하단 버튼이 fixed footer 뒤로 가려지던 버그 수정) */
  .studio-panel:not(.hidden) {
    position: static;
    flex: 1 0 auto;
    flex-direction: column;
  }
  /* ctrl: 전체 너비 / 컨텐츠 흐름 허용 */
  .studio-ctrl {
    width: 100%;
    min-width: 0;
    overflow: visible;
  }
  .studio-ctrl-body {
    flex: unset;
    overflow-y: visible;
  }
  /* out: main 스크롤에 위임 */
  .studio-out { overflow-y: visible; }
  /* stock: 모바일에서 사진(out)을 검색폼(ctrl) 위로 */
  [data-panel="stock"] .studio-out { order: -1; }
  /* edit: 모바일에서 MOVIE JSON(out)을 컨트롤(ctrl) 위로, 렌더 제출 맨 아래 */
  [data-panel="edit"] .studio-out { order: -1; }
}

/* Left controls panel — 폭은 --ctrl-w 변수로 (디바이더 드래그로 조절, 기본 340px) */
.studio-ctrl {
  width: var(--ctrl-w, 340px);
  min-width: 280px;
  display: flex;
  flex-direction: column;
  background: rgba(7,7,8,0.95);
  border-right: 1px solid var(--border);
  overflow: hidden;
  min-height: 0;
}

/* 좌(컨트롤)·우(출력) 사이 드래그 리사이즈 핸들 (app.js가 패널마다 삽입)
   ⚠️ 클래스명 studio-resizer — 기존 .studio-divider(장식용 1px 가로선, height:1px)와 이름 충돌 회피.
   absolute 배치 — 패널(.studio-panel은 position:absolute) 기준 top:0/bottom:0로 full-height 보장. */
.studio-resizer {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--ctrl-w, 340px);    /* ctrl 우측 경계에 위치 — 드래그 시 --ctrl-w 따라 이동 */
  width: 12px;
  margin-left: -6px;             /* 경계선 중앙 정렬 */
  z-index: 5;                    /* ctrl/out 위에서 클릭 수신 */
  cursor: col-resize;
  background: transparent;
  transition: background .15s;
  touch-action: none;            /* Pointer Events 드래그 — 터치 스크롤 방지 */
}
.studio-resizer::before {        /* 중앙 그립 라인 — 핸들 가시화 (사용자가 찾을 수 있게) */
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 2px; height: 44px;
  border-radius: 2px;
  background: rgba(255,255,255,0.2);
  transition: background .15s, height .15s;
}
.studio-resizer:hover, .studio-resizer.dragging { background: rgba(245,130,31,0.12); }
.studio-resizer:hover::before, .studio-resizer.dragging::before { background: #F5821F; height: 72px; }
@media (max-width: 1023px) { .studio-resizer { display: none; } }  /* 모바일: column 레이아웃이라 비표시 */

.studio-ctrl-header {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.studio-ctrl-header .dl { vertical-align: middle; }   /* 헤더 액션 버튼(TIP·Style DNA·새로 생성·오디오 ON/OFF) 수직 정렬 통일 — 모두 동일 높이(34px)라 middle 정렬로 한 줄 일치 (2026-07-18) */
.studio-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: #fafafa;
}
.studio-title:has(.studio-logo) { display: flex; align-items: center; gap: 4px; }   /* H 로고 + 플로우 같은 줄 중앙 정렬 */
.studio-logo { height: calc(1em + 2px); width: auto; filter: drop-shadow(0 0 6px rgba(255,106,0,0.65)); }   /* H플로우 제목의 H = 브랜드 로고 + 글로우(플로우보다 2px 크게) */
.studio-sub { font-size: 11.5px; color: var(--text-3); margin-top: 3px; line-height: 1.5; }

.studio-ctrl-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px;
  scrollbar-width: thin;
}

.studio-prompt-bar {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: rgba(6,7,8,0.85);
}
.studio-prompt-bar .ta {
  min-height: 96px;
  max-height: 240px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.55;
  resize: vertical;              /* 사용자가 직접 드래그해 키울 수 있음 */
  field-sizing: content;         /* Chrome/Edge: 내용에 맞춰 자동 확장(점진적 향상). Safari/FF는 app.js JS가 처리 */
}

/* Right output area */
.studio-out {
  flex: 1;
  overflow-y: auto;
  background: transparent;
  min-width: 0;
}
.studio-out-inner {
  padding: 20px;
  min-height: 0;
}

/* Media grid */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  align-content: start;
  align-items: start;   /* 그리드 기본값 stretch 차단 — 같은 줄에서 텍스트 카드(내용 김)가 다른 이미지·영상 카드까지 늘어나게 만들던 문제 해결(2026-07-21 사용자 지시) */
}
/* Empty state via CSS :empty */
/* 빈 화면 placeholder — media-grid(이미지·비디오·오디오)와 studio-text-out(프롬프트·시나리오·H SCENE·production) 통일: 아이콘+문구·세로중앙 */
.studio-out .media-grid:empty,
.studio-text-out:empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
  gap: 12px;
}
/* 상단 [갤러리·썸네일·전체지우기] 버튼 줄이 있는 이미지·비디오 탭은 placeholder 가 그만큼(실측 54px) 아래로 밀리므로, 버튼 없는 탭(오디오·프롬프트 등)과 세로 중심을 맞추기 위해 min-height 를 2배(108px) 축소 = 동일 세로 중심(Playwright 실측 검증) */
[data-panel="image"] .studio-out .media-grid:empty,
[data-panel="video"] .studio-out .media-grid:empty {
  min-height: calc(100vh - 308px);
}
.studio-out .media-grid:empty::before,
.studio-text-out:empty::before {
  content: '';
  display: block;
  width: 56px; height: 56px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2352525b' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0.62;   /* 0.4 → 0.62: AI 고지문(#6E6E76)보다 살짝 밝게 (2026-07-10 사용자 지시) */
}
.studio-out .media-grid:empty::after,
.studio-text-out:empty::after {
  content: '생성 버튼을 눌러 시작하세요';
  color: #85858E;   /* AI 고지문(#6E6E76)보다 한 단계 밝게 (2026-07-10 사용자 지시) */
  font-size: 14px;
}
html[lang="en"] .studio-text-out:empty::after { content: 'Click the generate button to start'; }
html[lang="ja"] .studio-text-out:empty::after { content: '生成ボタンを押して開始してください'; }
html[lang="de"] .studio-text-out:empty::after { content: 'Klicken Sie zum Starten auf Generieren'; }
html[lang="pt"] .studio-text-out:empty::after { content: 'Clique em Gerar para começar'; }
html[lang="es"] .studio-text-out:empty::after { content: 'Haz clic en Generar para empezar'; }
html[lang="fr"] .studio-text-out:empty::after { content: 'Cliquez sur Générer pour commencer'; }
/* 텍스트 탭(프롬프트·FLOW·SCENE·STORY) 빈 출력영역 카테고리 예시 배경 (2026-07-10) — 강한 딤, :empty 해제 시 자동 제거 */
#pr-out:empty, #sc-out:empty, #hs-out:empty, #prod-out:empty {
  background-size: cover; background-position: center;
  border-radius: 16px; overflow: hidden;
}
#pr-out:empty   { background-image: linear-gradient(rgba(6,6,8,0.84), rgba(6,6,8,0.90)), url('/media/home/bg-prompt.jpg'); }
#sc-out:empty   { background-image: linear-gradient(rgba(6,6,8,0.84), rgba(6,6,8,0.90)), url('/media/home/bg-flow.jpg'); }
#hs-out:empty   { background-image: linear-gradient(rgba(6,6,8,0.84), rgba(6,6,8,0.90)), url('/media/home/bg-scene.jpg'); }
#prod-out:empty { background-image: linear-gradient(rgba(6,6,8,0.84), rgba(6,6,8,0.90)), url('/media/home/bg-story.jpg'); }
/* 빈 출력영역 카테고리 예시 배경 (2026-07-10) — 강한 딤 처리로 생성물 오인 방지, 결과 렌더 시 :empty 해제로 자동 제거 */
[data-panel="image"] .studio-out .media-grid:empty,
[data-panel="video"] .studio-out .media-grid:empty,
[data-panel="audio"] .studio-out .media-grid:empty,
[data-panel="upscale"] .studio-out .media-grid:empty,
/* ★업스케일은 빈 상태에 데모(비교 슬라이더)를 JS 로 렌더해 :empty 가 해제되므로 위 규칙이 걸리지 않았다.
   그 결과 배경이 투명해져 뒤의 .aurora-orb(fixed·주황 radial-gradient·화면 상단 밖 y-94/-156)가 그대로
   비쳐 상단에 주황 띠로 보였다(2026-07-25 실측). 데모 상태에도 동일 배경을 적용해 비디오 탭과 같게 만든다. */
[data-panel="upscale"] .studio-out .media-grid:has(.ups-demo) {
  background-size: cover; background-position: center;
  border-radius: 16px; overflow: hidden;
}
[data-panel="image"] .studio-out .media-grid:empty { background-image: linear-gradient(rgba(6,6,8,0.84), rgba(6,6,8,0.90)), url('/media/home/tile-image-gen.jpg'); }
[data-panel="video"] .studio-out .media-grid:empty { background-image: linear-gradient(rgba(6,6,8,0.84), rgba(6,6,8,0.90)), url('/media/home/tile-flow-poster.jpg'); }
[data-panel="audio"] .studio-out .media-grid:empty { background-image: linear-gradient(rgba(6,6,8,0.84), rgba(6,6,8,0.90)), url('/media/home/tile-audio.jpg'); }
[data-panel="upscale"] .studio-out .media-grid:empty,
[data-panel="upscale"] .studio-out .media-grid:has(.ups-demo) { background-image: linear-gradient(rgba(6,6,8,0.84), rgba(6,6,8,0.90)), url('/media/home/tile-upscale.jpg'); }

/* 업스케일 before/after 비교 슬라이더(예시·2026-07-23) — 주황 라인 드래그 시 저화질↔고화질 차이 노출. 결과 렌더 시 #ups-out 교체로 자동 대체. */
.ups-demo { grid-column: 1 / -1; width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ups-demo-title { font-size: 24px; margin: 0 0 6px; }   /* .hs-demo-title(그라디언트 텍스트) 재사용 + 여백 조정 */
.ups-demo-desc { font-size: 12.5px; color: var(--text-2); max-width: 460px; margin: 0 auto 14px; line-height: 1.6; text-align: center; }   /* 헤더 밑 설명(sh-head-desc 규격) */
.ups-cmp { width: 100%; max-width: 760px; position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #0B0B0F; border: 1px solid rgba(255,255,255,0.08); user-select: none; -webkit-user-select: none; touch-action: none; cursor: ew-resize; }
.ups-cmp-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ups-cmp-before { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }   /* 왼쪽 끝~핸들 위치까지 저화질 노출, 그 오른쪽은 아래 고화질(after) 노출 */
.ups-cmp-tag { position: absolute; top: 12px; z-index: 3; font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 4px 9px; border-radius: 999px; background: rgba(6,6,8,0.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); pointer-events: none; }
.ups-cmp-tag-lo { left: 12px; color: #c9c9d2; }
.ups-cmp-tag-hi { right: 12px; color: #FF6A00; }
.ups-cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; background: #FF6A00; box-shadow: 0 0 14px rgba(255,106,0,0.7); transform: translateX(-1px); z-index: 4; pointer-events: none; }
.ups-cmp-grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; border-radius: 50%; background: #FF6A00; box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 0 3px rgba(255,106,0,0.25); display: flex; align-items: center; justify-content: center; color: #fff; }
.ups-cmp-grip svg { width: 20px; height: 20px; }
.ups-demo-cap { font-size: 12.5px; color: var(--text-2); max-width: 460px; margin: 12px auto 0; line-height: 1.6; text-align: center; }   /* 캡션 = 이미지 밖 아래·중앙(sh-head-desc 규격) */
/* 데모 슬라이더 세로 중앙 — 데스크톱 2단 레이아웃 전용(≥768px). 데모일 때만 고지문(note)을 absolute로 띄워 흐름에서 제외하고, 그리드를 inner full height로 채워 studio-out 전체 기준 정중앙. 실제 결과 카드가 오면 :has 미매치 → 고지문 정상 흐름·그리드 상단 정렬 유지. 모바일(≤767px)은 스택 흐름이라 height:100%+note absolute가 오히려 푸터 겹침을 유발 → 미적용(정상 흐름). */
@media (min-width: 768px) {
  [data-panel="upscale"] .studio-out-inner { height: 100%; box-sizing: border-box; position: relative; }
  [data-panel="upscale"] .studio-out-inner:has(.ups-cmp) > .note { position: absolute; top: 0; left: 0; right: 0; margin: 0; z-index: 1; }
  [data-panel="upscale"] .studio-out-inner:has(.ups-cmp) .media-grid { height: 100%; align-content: center; min-height: 0; }
}

/* Audio specific: video→sfx section */
.studio-section-card {
  background: rgba(14,15,18,0.7);
  border: 1px solid var(--border);
  border-top-color: rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 20px;
}
.studio-section-title {
  font-size: 14px; font-weight: 600; color: #fafafa; letter-spacing: -.01em;
}

/* ─── AUDIO ACCORDION (details/summary) ─────────────────────── */
details.studio-section-card > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: -20px;
  padding: 12px 20px;
  border-radius: 14px;
  transition: background 0.15s;
  user-select: none;
}
details.studio-section-card > summary::-webkit-details-marker,
details.studio-section-card > summary::marker { display: none; }
details.studio-section-card > summary::after {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--text-3);
  border-bottom: 1.5px solid var(--text-3);
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
details.studio-section-card > summary:hover { background: rgba(255,255,255,0.04); }
details.studio-section-card[open] > summary {
  border-radius: 14px 14px 0 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
details.studio-section-card[open] > summary::after {
  transform: rotate(45deg) translateY(-2px);
}

/* ─── STUDIO TEXT OUTPUT ────────────────────────────────────── */
/* 프롬프트/시나리오 등 텍스트 출력 영역 */
.studio-text-out {
  min-height: 120px;
}
/* .studio-text-out:empty 의 빈 화면 placeholder 는 media-grid:empty 와 통합 규칙(위쪽)에서 공통 처리 — 아이콘+문구·세로중앙 동일 */

/* ─── STUDIO DIVIDER ────────────────────────────────────────── */
.studio-divider {
  height: 1px;
  background: var(--border);
}

/* ─── JSON2VIDEO BUILDER ─────────────────────────────────────── */
.j2v-badge-idle   { font-size: 10px; padding: 2px 7px; border-radius: 5px; background: rgba(255,255,255,0.06); color: var(--text-3); }
.j2v-badge-render { font-size: 10px; padding: 2px 7px; border-radius: 5px; background: rgba(255,106,0,0.15); color: #FF6A00; }
.j2v-badge-done   { font-size: 10px; padding: 2px 7px; border-radius: 5px; background: rgba(34,197,94,0.15); color: #4ade80; }
.j2v-badge-error  { font-size: 10px; padding: 2px 7px; border-radius: 5px; background: rgba(255,154,31,0.15); color: #E11383; }

.j2v-preset {
  flex: 1; padding: 6px 0; font-size: 11px; cursor: pointer;   /* ff-mode-btn과 동일 크기로 통일(시인성) */
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border); border-radius: 7px;
  color: var(--text-2);
  transition: background .14s, color .14s, border-color .14s;
}
.j2v-preset:hover { background: rgba(255,255,255,0.1); color: var(--text-1); }
.j2v-preset.j2v-preset-active {
  background: rgba(255,106,0,0.14);
  border-color: rgba(255,106,0,0.38);
  color: #FF6A00;
}

/* 씬 카드 */
.j2v-scene-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.j2v-scene-header {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; user-select: none;
}
.j2v-scene-title { font-size: 12px; font-weight: 600; color: #e4e4e7; }
.j2v-scene-body { margin-top: 10px; }

/* 요소 카드 */
.j2v-elem-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
}
.j2v-elem-header { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.j2v-elem-type-badge {
  font-size: 9px; font-weight: 700; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 4px;
  background: rgba(96,165,250,0.12); color: rgba(96,165,250,0.85);
}
.j2v-elem-type-badge.type-text  { background: rgba(167,139,250,0.12); color: rgba(167,139,250,0.85); }
.j2v-elem-type-badge.type-audio { background: rgba(52,211,153,0.12);  color: rgba(52,211,153,0.85); }
.j2v-elem-type-badge.type-voice { background: rgba(251,191,36,0.12);  color: rgba(251,191,36,0.85); }
.j2v-elem-type-badge.type-video { background: rgba(255,106,0,0.12);  color: rgba(255,106,0,0.85); }

.j2v-add-elem-btns { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.j2v-add-elem-btn {
  font-size: 9.5px; padding: 3px 8px; border-radius: 5px; cursor: pointer;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-2);
  transition: background .13s, color .13s;
}
.j2v-add-elem-btn:hover { background: rgba(255,255,255,0.1); color: var(--text-1); }

/* 오른쪽 패널: JSON 미리보기 */
.j2v-json-preview {
  background: rgba(5,6,8,0.85);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  font-size: 11px;
  line-height: 1.55;
  color: #71717a;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 400px;
  overflow-y: auto;
}
.j2v-json-preview:empty { display: none; }
.j2v-json-preview-label {
  font-size: 10px; font-weight: 600; letter-spacing: .06em;
  color: var(--text-3); margin-bottom: 8px;
  text-transform: uppercase;
}

/* 결과 비디오 */
.j2v-result-video {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  display: block;
}

/* 렌더링 진행 표시 */
.j2v-progress {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  background: rgba(255,106,0,0.06);
  border: 1px solid rgba(255,106,0,0.15);
  border-radius: 10px;
  font-size: 12px; color: #FF6A00;
}
.j2v-progress-spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,106,0,0.2);
  border-top-color: #FF6A00;
  border-radius: 50%;
  flex-shrink: 0;
  animation: sb-spin .75s linear infinite;
}

/* ─── STUDIO INFO BLOCK ─────────────────────────────────────── */
.studio-info-block {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}
.studio-info-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text-2);
}


/* ─── FFMPEG TAB ─────────────────────────────────────────────── */
.ff-mode-btn {
  flex: 1; padding: 6px 0; font-size: 11px; cursor: pointer;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border); border-radius: 7px;
  color: var(--text-2);
  transition: background .14s, color .14s, border-color .14s;
}
.ff-mode-btn:hover { background: rgba(255,255,255,0.1); color: var(--text-1); }
.ff-mode-btn.ff-mode-active {
  background: rgba(255,106,0,0.14);
  border-color: rgba(255,106,0,0.38);
  color: #FF6A00;
}

/* 프리셋 그리드 — 2열 카드 */
.ff-op-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
/* 스톡 소스: 웹=펼친 버튼 그리드 / 모바일=드롭다운 (모바일은 현행 유지) */
#st-source { display: none; }
#st-source-grid { display: grid; }
@media (max-width: 1023px) {
  #st-source { display: block; }
  #st-source-grid { display: none; }
}
.ff-op-card {
  padding: 9px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
  transition: background .14s, border-color .14s;
  text-align: left;
}
.ff-op-card:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); }
.ff-op-card.ff-op-selected {
  background: rgba(255,106,0,0.1);
  border-color: rgba(255,106,0,0.4);
}
.ff-op-card-name { font-size: 11px; font-weight: 600; color: #e4e4e7; line-height: 1.3; }
.ff-op-card-cat  { font-size: 9.5px; color: var(--text-3); margin-top: 2px; }

/* 결과 영역 */
.ff-out:empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: calc(100vh - 200px);
  gap: 12px; color: var(--text-3); font-size: 14px;
}
.ff-out:empty::before {
  content: '';
  display: block; width: 56px; height: 56px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2352525b' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cpath d='m10 13 2 2 4-4'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0.4;
}
.ff-out:empty::after { content: '처리 시작 버튼을 누르세요'; }
html[lang="en"] .ff-out:empty::after { content: 'Click the process button to start'; }
html[lang="ja"] .ff-out:empty::after { content: '処理開始ボタンを押してください'; }
html[lang="de"] .ff-out:empty::after { content: 'Klicken Sie auf die Verarbeiten-Taste'; }
html[lang="pt"] .ff-out:empty::after { content: 'Clique no botão Processar'; }
html[lang="es"] .ff-out:empty::after { content: 'Pulsa el botón de procesar'; }
html[lang="fr"] .ff-out:empty::after { content: 'Appuyez sur le bouton de traitement'; }

/* FFprobe 메타데이터 표 */
.ff-probe-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}
.ff-probe-table th {
  text-align: left; padding: 6px 10px;
  color: var(--text-3); font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.ff-probe-table td {
  padding: 6px 10px;
  color: var(--text-1);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ff-probe-table tr:last-child td { border-bottom: none; }

/* AI 생성 명령어 */
.ff-ai-cmd {
  background: rgba(5,6,8,0.9);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: #86efac;
  white-space: pre-wrap;
  word-break: break-all;
  margin-top: 10px;
}
.ff-result-video { width:100%; border-radius:10px; display:block; background:#000; }
.ff-result-audio { width:100%; margin-top:8px; }

/* ─── STORYBOARD ────────────────────────────────────────────── */
.sb-grid { display: grid; gap: 16px; align-content: start; }
.sb-cols-2 { grid-template-columns: repeat(2, 1fr); }
.sb-cols-3 { grid-template-columns: repeat(3, 1fr); }
.sb-cols-4 { grid-template-columns: repeat(4, 1fr); }

.sb-panel {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-top-color: rgba(255,255,255,0.09);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.sb-panel:hover {
  border-color: rgba(255,106,0,0.22);
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
}
.sb-panel-frame {
  position: relative;
  background: #09090b;
  overflow: hidden;
}
.sb-panel-frame img { width: 100%; display: block; }
.sb-panel-frame.ratio-16-9 { aspect-ratio: 16/9; }
.sb-panel-frame.ratio-9-16  { aspect-ratio: 9/16; }
.sb-panel-frame.ratio-1-1   { aspect-ratio: 1/1; }
.sb-panel-frame.ratio-4-3   { aspect-ratio: 4/3; }
/* 스토리보드: 각 SHOT을 표준 비율(16:9 등)로 유지 → SHOT이 많으면(24 SHOT 등) 세로로 늘어나고
   studio-out(overflow-y:auto)이 스크롤. 기존 "한 페이지 fit(행 균등 축소)"는 SHOT이 많을수록
   패널이 과도하게 작아져 폐기. */
[data-panel="storyboard"] .studio-out-inner { box-sizing: border-box; }
#sb-actions { flex: 0 0 auto; }
[data-panel="storyboard"] .sb-grid { align-content: start; gap: 12px; }
[data-panel="storyboard"] .sb-panel { display: flex; flex-direction: column; }
[data-panel="storyboard"] .sb-panel-frame img { width: 100%; height: 100%; object-fit: cover; }
[data-panel="storyboard"] .sb-panel-meta { flex: 0 0 auto; }

.sb-loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.sb-loading::after {
  content: '';
  width: 20px; height: 20px;
  border: 2px solid rgba(255,255,255,0.08);
  border-top-color: rgba(255,106,0,0.75);
  border-radius: 50%;
  animation: sb-spin .75s linear infinite;
}
@keyframes sb-spin { to { transform: rotate(360deg); } }

.sb-shot-badge {
  position: absolute; top: 6px; left: 6px;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(4px);
  color: #e4e4e7;
  font-size: 9px; font-weight: 700; letter-spacing: .07em;
  padding: 2px 7px; border-radius: 4px;
}
.sb-panel-meta { padding: 8px 11px 10px; }
.sb-panel-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 5px; }
/* 콘티 설명 표시 토글 OFF(body.sb-hide-meta) — 패널 아래 표준 콘티 텍스트만 숨김(이미지·재생성 버튼 유지) */
body.sb-hide-meta .sb-panel-badges,
body.sb-hide-meta .sb-panel-action,
body.sb-hide-meta .sb-panel-sub { display: none; }
.sb-badge {
  background: rgba(255,255,255,0.06);
  color: var(--text-2);
  font-size: 9px; padding: 2px 6px; border-radius: 4px; white-space: nowrap;
}
.sb-badge-cam { background: rgba(255,106,0,0.1); color: rgba(255,106,0,0.85); }
.sb-badge-trans { background: rgba(96,165,250,0.1); color: rgba(96,165,250,0.8); }
.sb-panel-action {
  font-size: 11px; color: var(--text-1); line-height: 1.5; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sb-panel-sub {
  font-size: 10px; color: var(--text-2); line-height: 1.4; margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sb-panel-regen { width: 100%; margin-top: 8px; font-size: 11px; padding: 4px 8px; }

.sb-col-btn {
  flex: 1; padding: 5px 0;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text-2); font-size: 13px; cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}
.sb-col-btn:hover { background: rgba(255,255,255,0.1); color: var(--text-1); }
.sb-col-btn.sb-col-active {
  background: rgba(255,106,0,0.14);
  border-color: rgba(255,106,0,0.38);
  color: #FF6A00;
}

#sb-out:empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: calc(100vh - 200px); gap: 12px;
  color: #85858E; font-size: 14px;   /* AI 고지문(#6E6E76)보다 한 단계 밝게 (2026-07-10) */
  /* 카테고리 예시 배경 (2026-07-10) — 강한 딤 처리, 결과 렌더 시 자동 제거 */
  background-image: linear-gradient(rgba(6,6,8,0.84), rgba(6,6,8,0.90)), url('/media/home/tile-storyboard.jpg');
  background-size: cover; background-position: center;
  border-radius: 16px; overflow: hidden;
}
#sb-out:empty::before {
  content: '';
  display: block; width: 56px; height: 56px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2352525b' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='2' y='3' width='9' height='7' rx='1'/%3E%3Crect x='13' y='3' width='9' height='7' rx='1'/%3E%3Crect x='2' y='14' width='9' height='7' rx='1'/%3E%3Crect x='13' y='14' width='9' height='7' rx='1'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0.62;   /* 0.4 → 0.62 (2026-07-10 사용자 지시) */
}
#sb-out:empty::after { content: '스토리보드 생성 버튼을 눌러 시작하세요'; }
html[lang="en"] #sb-out:empty::after { content: 'Click Generate Storyboard to start'; }
html[lang="ja"] #sb-out:empty::after { content: 'ストーリーボード生成ボタンを押して開始'; }
html[lang="de"] #sb-out:empty::after { content: 'Klicken Sie auf Storyboard generieren'; }
html[lang="pt"] #sb-out:empty::after { content: 'Clique em Gerar storyboard'; }
html[lang="es"] #sb-out:empty::after { content: 'Pulsa Generar storyboard'; }
html[lang="fr"] #sb-out:empty::after { content: 'Appuyez sur Générer le storyboard'; }

/* ─── STOCK / LIBRARY empty state ───────────────────────────── */
.media-grid:not([id="lib-out"]):empty::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2352525b' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21'/%3E%3C/svg%3E");
}
#lib-out:empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
  gap: 12px;
}
#lib-out:empty::before {
  content: '';
  display: block;
  width: 56px; height: 56px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2352525b' stroke-width='1.2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0.35;
}
#lib-out:empty::after {
  content: '아직 생성물이 없습니다';
  color: var(--text-3);
  font-size: 14px;
}
html[lang="en"] #lib-out:empty::after { content: 'No results yet'; }
html[lang="ja"] #lib-out:empty::after { content: 'まだ生成物がありません'; }
html[lang="de"] #lib-out:empty::after { content: 'Noch keine Ergebnisse'; }
html[lang="pt"] #lib-out:empty::after { content: 'Ainda sem resultados'; }
html[lang="es"] #lib-out:empty::after { content: 'Aún no hay resultados'; }
html[lang="fr"] #lib-out:empty::after { content: 'Aucun résultat pour l’instant'; }

/* ─── HOME PANEL ─────────────────────────────────────────────── */
.home-hero {
  text-align: center;
  padding: 52px 20px 40px;
}
.home-hero-badge {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acc);
  background: rgba(255,106,0,0.1);
  border: 1px solid rgba(255,106,0,0.28);
  border-radius: 100px; padding: 5px 14px;
  margin-bottom: 16px;
}
/* Hero title — Figma Make 브랜드 verbatim: YOUNG orange 700 + SFIELD thin 45% */
/* Hero title — 사이드바 워드마크와 동일: YOUNG / SFIELD. 스택형 */
.home-hero-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 56px; line-height: 1.05; letter-spacing: .12em;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  margin-bottom: 14px;
  background: none; -webkit-background-clip: unset; background-clip: unset;
  -webkit-text-fill-color: unset;
}
.hero-young {
  color: #FF6A00;
  font-weight: 700;
}
.hero-sfield {
  color: rgba(250,250,250,0.42);
  font-weight: 300;
}
.home-hero-sub {
  font-size: 15px; color: var(--text-3); letter-spacing: .01em;
}

.home-section-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #4A4A54; margin-bottom: 14px;
  display: flex; align-items: center; gap: 12px;
}
.home-section-label::after {
  content: '';
  flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.06) 0%, transparent 80%);
}

/* Quick action cards */
.home-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 8px;
}
@media (max-width: 900px) { .home-quick-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .home-quick-grid { grid-template-columns: 1fr 1fr; } }

.home-quick-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-top-color: rgba(255,255,255,0.09);
  border-radius: 16px; padding: 20px 16px;
  cursor: pointer; text-align: left;
  transition: border-color .2s, transform .18s ease, box-shadow .2s;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
  position: relative; overflow: hidden;
  opacity: 0.80;
}
.home-quick-card::before {
  content: '';
  position: absolute; top: 0; left: 15%; right: 15%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
}
.home-quick-card:hover {
  border-color: rgba(255,106,0,0.28);
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,106,0,0.15);
}
.home-quick-icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: rgba(255,106,0,0.1);
  border: 1px solid rgba(255,106,0,0.2);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  color: var(--acc);
}
.home-quick-icon svg { width: 20px; height: 20px; }
.home-quick-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px; font-weight: 600; color: #fafafa; margin-bottom: 4px;
}
.home-quick-desc { font-size: 11.5px; color: var(--text-3); line-height: 1.4; }

/* Model list */
.home-model-group {
  background: rgba(12,13,16,0.6);
  border: 1px solid var(--border);
  border-radius: 14px; padding: 16px;
}
.home-model-group-label {
  font-size: 12px; font-weight: 600; color: var(--text-2);
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.home-model-group-ic { width: 14px; height: 14px; color: var(--acc); }
.model-pill-list { display: flex; flex-wrap: wrap; gap: 8px; }
.model-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 100px; padding: 5px 13px;
  font-size: 12px; color: var(--text-2);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.model-pill:hover { background: rgba(255,106,0,0.1); color: var(--acc); border-color: rgba(255,106,0,0.25); }
.model-pill-badge {
  font-size: 10px; color: var(--text-3); letter-spacing: .02em;
}

/* Library preview on home */
.home-lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  min-height: 160px;
}
.home-lib-empty {
  grid-column: 1 / -1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 40px 20px;
  color: var(--text-3); font-size: 13px; gap: 10px;
  background: rgba(12,13,16,0.5);
  border: 1px dashed rgba(255,255,255,0.07);
  border-radius: 14px;
}

/* ─── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 640px) {
  .card { padding: 16px; border-radius: 14px; }
  .card .flex.gap-3 { flex-direction: column; align-items: stretch; }
  .card .flex.gap-3 > div { width: 100%; }
  .panel-title { font-size: 22px; }
  .home-hero-title { font-size: 36px; letter-spacing: .08em; }
  /* studio-ctrl: column 레이아웃에서 전체 너비 (위 ≤1023px 규칙 강화) */
  .studio-ctrl { width: 100%; min-width: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   HOME HERO CINEMATIC — CINECRAFT style
   실사 이미지 교체: .hc-img src에 URL 입력, .hc-canvas는 fallback
   ═══════════════════════════════════════════════════════════════ */
.home-hero-cinematic { margin-bottom: 36px; }

.hc-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.hc-sub {
  font-size: 13px; color: var(--text-3); letter-spacing: .01em;
}

/* Image frame */
.hc-image-frame {
  position: relative;
  width: 100%;
  height: 420px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: #080809;
}

/* Canvas overlay (grain + stripe) */
.hc-canvas {
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

/* Film grain noise */
.hc-grain {
  position: absolute; inset: 0;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
}

/* Clapperboard stripe bar (CINECRAFT ref) */
.hc-stripe-bar {
  position: absolute; top: 0; left: 0; right: 0;
  height: 44px; z-index: 3;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 7px,
    transparent 7px, transparent 14px
  );
  border-bottom: 1px solid rgba(255,106,0,0.2);
  display: flex; align-items: center; padding: 0 16px;
}
.hc-stripe-bar span {
  font-size: 8px; font-weight: 700; letter-spacing: .18em;
  color: rgba(255,255,255,0.35);
  font-family: 'Space Grotesk', monospace;
  text-transform: uppercase;
}

/* Bottom caption overlay (CINECRAFT ref) */
.hc-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 20px 20px 18px;
  display: flex; align-items: flex-end; gap: 20px;
  z-index: 4;
  background: linear-gradient(0deg, rgba(8,8,9,0.92) 0%, transparent 100%);
}
.hc-caption-left {
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.hc-caption-label {
  font-size: 8.5px; font-weight: 700; letter-spacing: .14em;
  color: rgba(255,255,255,0.4);
  font-family: 'Space Grotesk', sans-serif;
}
.hc-barcode { display: block; }
.hc-caption-text {
  font-size: 12.5px; color: rgba(255,255,255,0.45); line-height: 1.6;
  flex: 1;
}
.hc-caption-text strong { color: rgba(255,255,255,0.85); font-weight: 600; }

@media (max-width: 768px) {
  .hc-image-frame { height: 280px; }
  .hc-top { flex-direction: column; align-items: flex-start; gap: 6px; }
  .hc-caption-text { font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════
   MAIN BANNER — 4-panel AI Production Grid
   Ref: PICPRO 4-split layout + CINECRAFT dark cinematic style
   2026 trends: bento grid · editorial bold type · film aesthetic
   ═══════════════════════════════════════════════════════════════ */
.main-banner-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 32px 0 40px;
}

/* ── Banner Card ───────────────────────────────────────────── */
.banner-card {
  background: rgba(14,15,18,0.88);
  border: 1px solid rgba(255,255,255,0.07);
  border-top-color: rgba(255,255,255,0.12);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .22s ease, border-color .22s, box-shadow .22s;
  position: relative;
}
.banner-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,106,0,0.3);
  box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,106,0,0.12);
}
.banner-card:hover .banner-arrow { color: #FF6A00; transform: translateX(4px); }

/* ── Visual area (top portion) ─────────────────────────────── */
.banner-visual {
  position: relative;
  height: 190px;
  overflow: hidden;
}
.bv-label-top {
  position: absolute; top: 12px; left: 14px;
  font-size: 9px; font-weight: 700; letter-spacing: .14em;
  color: rgba(255,255,255,0.3);
  font-family: 'Space Grotesk', sans-serif;
}

/* ── 01 IMAGE — Abstract AI generative art ─────────────────── */
.bv-image {
  background: #0B0B0D;
}
.bv-orb {
  position: absolute; border-radius: 50%;
  filter: blur(28px); opacity: 0.88;
  animation: bv-float 6s ease-in-out infinite alternate;
}
.bv-orb-1 {
  width: 130px; height: 130px;
  background: radial-gradient(circle, rgba(255,106,0,0.75), transparent 70%);
  top: -20px; left: -20px;
}
.bv-orb-2 {
  width: 110px; height: 110px;
  background: radial-gradient(circle, rgba(255,154,31,0.65), transparent 70%);
  top: 20px; right: -10px;
  animation-delay: -2s;
}
.bv-orb-3 {
  width: 90px; height: 90px;
  background: radial-gradient(circle, rgba(99,102,241,0.55), transparent 70%);
  bottom: 10px; left: 40%;
  animation-delay: -4s;
}
@keyframes bv-float {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(8px, -12px) scale(1.08); }
}

/* ─── 2026 Bento inner visual 신규 클래스 ─────────────────── */

/* 01 IMAGE — dot grid (이전 버전 유지) */
.bv-dotgrid {
  background-color: #080809;
  background-image: radial-gradient(circle, rgba(255,255,255,0.18) 1px, transparent 1px);
  background-size: 18px 18px;
  background-position: 9px 9px;
}
.bv-mesh-center {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 50%,
    rgba(255,106,0,0.14) 0%, rgba(255,154,31,0.08) 50%, transparent 70%);
  pointer-events: none;
}

/* 02 VIDEO — horizontal scan line */
/* ─── VIDEO — 슬레이트 (clapperboard) ───────────────────────── */
.bv-slate-bg {
  background: #0a0a0b;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  position: relative;
}
.bv-slate-bg::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 50%, rgba(255,154,31,0.07) 0%, transparent 70%);
  pointer-events: none;
}
.bv-slate-wrap {
  width: 78%; position: relative;
}
.bv-slate-arm {
  width: 100%; height: 18px;
  background: repeating-linear-gradient(
    -45deg,
    #1a1a1a 0px, #1a1a1a 8px,
    rgba(255,106,0,0.85) 8px, rgba(255,106,0,0.85) 16px
  );
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 3px 3px 0 0;
  transform-origin: left center;
  animation: bv-slate-clap 2.8s ease-in-out infinite;
}
@keyframes bv-slate-clap {
  0%   { transform: rotate(-42deg); }
  35%  { transform: rotate(-42deg); }
  55%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
.bv-slate-body {
  background: #111213;
  border: 1px solid rgba(255,255,255,0.18);
  border-top: none; border-radius: 0 0 4px 4px;
  padding: 7px 10px 8px;
}
.bv-slate-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 8px; font-weight: 800; letter-spacing: .14em;
  color: rgba(255,255,255,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  padding-bottom: 4px; margin-bottom: 5px;
}
.bv-slate-fields { display: flex; gap: 10px; }
.bv-sl-row { display: flex; flex-direction: column; gap: 1px; }
.bv-sl-k {
  font-family: 'Space Grotesk', monospace;
  font-size: 6px; font-weight: 700; letter-spacing: .1em;
  color: rgba(255,255,255,0.35);
}
.bv-sl-v {
  font-family: 'Space Grotesk', monospace;
  font-size: 11px; font-weight: 700;
  color: rgba(255,106,0,0.90);
}
.bv-slate-bg .bv-timecode {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 9px; font-weight: 700; letter-spacing: .08em;
  color: rgba(255,154,31,0.85);
}


.bv-scanline {
  background-color: #080809;
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0px, transparent 3px,
    rgba(255,255,255,0.025) 3px, rgba(255,255,255,0.025) 4px
  );
}
.bv-film-meta {
  margin: 8px 10px 0;
  padding: 6px 10px;
  font-family: 'Space Grotesk', monospace;
  font-size: 7px; font-weight: 700; letter-spacing: .12em;
  color: rgba(255,154,31,0.55);
  border: 1px solid rgba(255,154,31,0.18);
  border-radius: 4px;
  display: flex; gap: 12px;
}
.bv-film-meta::before { content: 'REC ●'; }
.bv-film-meta::after  { content: 'AI I2V · 1080p'; }

/* 03 AUDIO — audio bg mesh */
/* ─── AUDIO — dot matrix VU meter ───────────────────────────── */
.bv-vu-bg {
  background: #080809; position: relative; overflow: hidden;
}
.bv-vu-bg::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 90%,
    rgba(255,106,0,0.08) 0%, rgba(255,154,31,0.05) 55%, transparent 75%);
  pointer-events: none;
}
.bv-vu-meter {
  position: absolute; inset: 6px 8px 4px;
  display: flex; align-items: stretch; gap: 4px;
}
.bv-vu-ch {
  flex: 1; position: relative;
}
/* bar: position absolute, bottom에서 위로 */
.bv-vu-bar {
  position: absolute; bottom: 14px; left: 0; right: 0;
  border-radius: 2px 2px 0 0; overflow: hidden;
  /* dot pattern: 4px on + 2px gap — 주황(하단) → 핑크(상단 28%) */
  background:
    repeating-linear-gradient(
      to top,
      transparent 0px, transparent 2px,
      rgba(255,154,31,0.92) 2px, rgba(255,154,31,0.92) 6px
    )
    0 100% / 100% 28% no-repeat,
    repeating-linear-gradient(
      to top,
      transparent 0px, transparent 2px,
      rgba(255,106,0,0.88) 2px, rgba(255,106,0,0.88) 6px
    )
    0 100% / 100% 100% no-repeat;
  height: var(--h, 65%);
  /* VU 표준: 빠른 attack(올라감) + 느린 decay(내려감) → cubic-bezier */
  animation: bv-vu-anim var(--spd, 3.5s) var(--d, 0s) cubic-bezier(0.22, 0.61, 0.36, 1) infinite alternate;
}
/* peak hold white dot */
.bv-vu-bar::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: rgba(255,255,255,0.90);
  border-radius: 1px;
}
@keyframes bv-vu-anim {
  0%   { height: calc(var(--h, 65%) * 0.38); opacity: 0.45; }
  100% { height: var(--h, 65%);              opacity: 1.00; }
}
.bv-vu-lbl {
  position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  font-family: 'Space Grotesk', monospace;
  font-size: 6px; font-weight: 700; letter-spacing: .05em;
  color: rgba(255,255,255,0.28);
}
.bv-vu-sep {
  width: 1px; background: rgba(255,255,255,0.10);
  flex-shrink: 0; margin: 0 1px;
}
.bv-vu-master .bv-vu-bar {
  background:
    repeating-linear-gradient(to top, transparent 0px, transparent 2px, rgba(255,255,255,0.88) 2px, rgba(255,255,255,0.88) 6px)
    0 100% / 100% 10% no-repeat,
    repeating-linear-gradient(to top, transparent 0px, transparent 2px, rgba(255,154,31,0.92) 2px, rgba(255,154,31,0.92) 6px)
    0 100% / 100% 32% no-repeat,
    repeating-linear-gradient(to top, transparent 0px, transparent 2px, rgba(255,106,0,0.88) 2px, rgba(255,106,0,0.88) 6px)
    0 100% / 100% 100% no-repeat;
}
.bv-vu-master .bv-vu-lbl { color: rgba(255,106,0,0.65); }



/* legacy bv-audio-bg (보관) */
.bv-audio-bg {
  background: #080809; position: relative;
}
.bv-waveform {
  position: absolute; inset: 14px 8px 8px;
  display: flex; align-items: flex-end; gap: 3px;
}

/* 04 STORYBOARD — 표준 스토리보드 레이아웃 */
.bv-sb-pro-bg {
  background: #07090a; position: relative; overflow: hidden;
}
.bv-sb-pro-bg::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 20% 50%, rgba(6,182,212,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.bv-sb-pro-grid {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 6px; padding: 8px 8px 6px;
}
.bv-sbf {
  display: flex; flex-direction: column; gap: 2px;
}
.bv-sbf-num {
  font-family: 'Space Grotesk', monospace;
  font-size: 6px; font-weight: 700; letter-spacing: .1em;
  color: rgba(6,182,212,0.55);
}
.bv-sbf-act .bv-sbf-num { color: rgba(6,182,212,0.90); }
.bv-sbf-canvas {
  flex: 1; aspect-ratio: 16/9;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(6,182,212,0.18);
  border-radius: 3px; position: relative; overflow: hidden;
}
.bv-sbf-act .bv-sbf-canvas {
  border-color: rgba(6,182,212,0.55);
  background: rgba(6,182,212,0.06);
  box-shadow: 0 0 8px rgba(6,182,212,0.20);
}
.bv-sbf-horizon {
  position: absolute; bottom: 35%; left: 0; right: 0; height: 1px;
  background: rgba(255,255,255,0.15);
}
.bv-sbf-subj {
  position: absolute; bottom: 35%;
  background: rgba(255,255,255,0.25);
  border-radius: 1px;
}
.bv-sbf-act .bv-sbf-subj { background: rgba(6,182,212,0.60); }
.bv-sbf-wide { left: 15%; right: 15%; height: 45%; }
.bv-sbf-med  { left: 28%; right: 28%; height: 50%; }
.bv-sbf-cu   { left: 36%; right: 36%; bottom: 25%; height: 60%; }
.bv-sbf-sky  { position: absolute; top: 0; left: 0; right: 0; height: 40%; background: rgba(6,182,212,0.04); }
.bv-sbf-cu-eye {
  position: absolute; top: 30%; left: 50%; transform: translateX(-50%);
  width: 30%; height: 18%; border-radius: 50%; background: rgba(6,182,212,0.20); border: 1px solid rgba(6,182,212,0.40);
}
/* O/S */
.bv-sbf-oa { background: rgba(6,182,212,0.03); }
.bv-sbf-os-a {
  position: absolute; bottom: 0; left: 0; width: 32%; height: 80%;
  background: rgba(255,255,255,0.12); border-radius: 2px 2px 0 0;
}
.bv-sbf-os-b {
  position: absolute; bottom: 20%; left: 22%; right: 10%;
  height: 50%; background: rgba(255,255,255,0.18); border-radius: 2px;
}
/* L/A */
.bv-sbf-low { bottom: 20%; top: auto; height: 1px; }
.bv-sbf-la  { left: 30%; right: 30%; bottom: 20%; height: 78%; }
/* B/A */
.bv-sbf-ba-dot {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 24%; aspect-ratio: 1;
  border: 1px solid rgba(6,182,212,0.40); border-radius: 50%;
  background: rgba(6,182,212,0.10);
}
.bv-sbf-ba-dot::after {
  content: '';
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 35%; aspect-ratio: 1; border-radius: 50%;
  background: rgba(6,182,212,0.45);
}
.bv-sbf-note {
  font-family: 'Space Grotesk', monospace;
  font-size: 6px; font-weight: 700; letter-spacing: .08em;
  color: rgba(255,255,255,0.28); text-align: center;
}
.bv-sbf-act .bv-sbf-note { color: rgba(255,106,0,0.80); }

/* SVG drawing animation */
.bv-draw-svg {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
}
.bv-dp {
  fill: none;
  stroke: rgba(255,106,0,0.80);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: var(--len, 200);
  stroke-dashoffset: var(--len, 200);
  animation: bv-svg-draw 3.5s var(--del, 0s) ease-out infinite;
}
.bv-sbf-act .bv-dp { stroke: rgba(255,106,0,0.95); }
@keyframes bv-svg-draw {
  0%    { stroke-dashoffset: var(--len, 200); opacity: 1; }
  55%   { stroke-dashoffset: 0; opacity: 1; }
  80%   { stroke-dashoffset: 0; opacity: 0.85; }
  95%   { stroke-dashoffset: 0; opacity: 0; }
  100%  { stroke-dashoffset: var(--len, 200); opacity: 0; }
}

/* 04 STORYBOARD — dot grid (이전 버전) */
.bv-dotgrid-cyan {
  background-color: #080a0b;
  background-image: radial-gradient(circle, rgba(6,182,212,0.20) 1px, transparent 1px);
  background-size: 16px 16px;
  background-position: 8px 8px;
}
.bv-sb-grid {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  padding: 14px 12px 10px;
}


.bv-pixel-grid {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr); gap: 3px; padding: 28px 14px 14px;
}
.bv-pixel-grid span {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 4px;
}
.bv-pixel-grid span:nth-child(3),
.bv-pixel-grid span:nth-child(7) {
  background: rgba(255,106,0,0.12);
  border-color: rgba(255,106,0,0.22);
}

/* ── 02 STORYBOARD — 3×3 panel grid ───────────────────────── */
.bv-storyboard {
  background: #0B0B0D;
  display: flex; align-items: center; justify-content: center;
}
.bv-sb-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  padding: 32px 18px 18px; width: 100%;
}
.bv-sb-panel {
  aspect-ratio: 16/9;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 4px;
  display: flex; align-items: flex-start; justify-content: flex-start;
  padding: 3px 4px;
}
.bv-sb-panel span {
  font-size: 7px; color: rgba(255,255,255,0.45);
  font-family: 'Space Grotesk', monospace; font-weight: 600;
}
.bv-sb-active {
  border-color: rgba(6,182,212,0.60) !important;
  background: rgba(6,182,212,0.13) !important;
  box-shadow: 0 0 8px rgba(6,182,212,0.25);
}
.bv-sb-active span { color: rgba(6,182,212,0.85) !important; }

/* ── 03 VIDEO — Clapperboard + Film Frame (CINECRAFT ref) ──── */
.bv-video { background: #080809; }
.bv-clap-stripe {
  height: 56px;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,0.15) 0px, rgba(255,255,255,0.15) 8px,
    transparent 8px, transparent 16px
  );
  border-bottom: none;
  position: relative;
}
.bv-clap-stripe::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, rgba(255,106,0,0.70) 0%, rgba(255,154,31,0.55) 100%);
}
.bv-clap-stripe::before {
  content: 'HFLUX · AI VIDEO CREATION PLATFORM';
  position: absolute; top: 50%; left: 12px; transform: translateY(-50%);
  font-size: 7px; font-weight: 700; letter-spacing: .1em;
  color: rgba(255,255,255,0.75);
  font-family: 'Space Grotesk', monospace;
}
.bv-film-frame {
  margin: 8px 10px 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 6px;
  padding: 10px 12px;
  display: flex; align-items: center; justify-content: space-between;
}
.bv-sprocket {
  width: 10px; height: 10px;
  border-radius: 2px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.28);
}
.bv-timecode {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  color: rgba(255,255,255,0.78);
}

/* ── 04 AUDIO — Waveform spectrum ──────────────────────────── */
.bv-audio { background: #080809; }
.bv-bar {
  flex: 1;
  height: var(--h);
  background: linear-gradient(to top, rgba(139,92,246,0.95), rgba(139,92,246,0.20));
  border-radius: 2px 2px 0 0;
  position: relative;
  animation: bv-pulse var(--spd, 1.8s) var(--d, 0s) ease-in-out infinite alternate;
}
/* peak hold indicator */
.bv-bar::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: rgba(192,132,252,0.90);
  border-radius: 1px;
}
/* 보라 계열로 통일 — 밝기 변화로만 구분 */
.bv-bar:nth-child(odd)  { background: linear-gradient(to top, rgba(168,85,247,0.95), rgba(139,92,246,0.25)); }
.bv-bar:nth-child(3n)   { background: linear-gradient(to top, rgba(99,102,241,0.90),  rgba(139,92,246,0.18)); }
.bv-bar:nth-child(6)    { background: linear-gradient(to top, rgba(192,132,252,1.00), rgba(168,85,247,0.40)); box-shadow: 0 0 10px rgba(192,132,252,0.45); }
@keyframes bv-pulse {
  0%   { opacity: 0.60; transform: scaleY(0.68); }
  100% { opacity: 1;    transform: scaleY(1); }
}

/* ── Banner Body (bottom content area) ─────────────────────── */
.banner-body {
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(255,255,255,0.05);
  display: flex; flex-direction: column; gap: 4px;
}
.banner-category {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  color: var(--text-3); text-transform: uppercase;
  margin-bottom: 2px;
}
.banner-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--acc); flex-shrink: 0;
  animation: banner-dot-pulse 2s ease-in-out infinite;
}
@keyframes banner-dot-pulse {
  0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,106,0,0.4); }
  50%      { opacity: 0.7; box-shadow: 0 0 0 4px rgba(255,106,0,0); }
}
.banner-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px; font-weight: 700; letter-spacing: -.01em;
  color: #fafafa; line-height: 1.2;
}
.banner-title-thin {
  font-weight: 300; color: rgba(250,250,250,0.45); letter-spacing: .04em;
}
.banner-desc {
  font-size: 10.5px; color: var(--text-3); margin-top: 2px;
}
.banner-arrow {
  font-size: 14px; color: rgba(255,255,255,0.25);
  margin-top: 6px; transition: color .15s, transform .15s;
  display: inline-block;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .main-banner-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .main-banner-grid { grid-template-columns: 1fr; }
  .banner-visual { height: 140px; }
}

/* ═══════════════════════════════════════════════════════════════
   SITE FOOTER — Orange Tone & Manner
   Ref: Higgsfield.ai 4-column sitemap layout
   H-Production × HFLUX
   ═══════════════════════════════════════════════════════════════ */
.site-footer {
  background:
    radial-gradient(ellipse 80% 40% at 15% 0%, rgba(255,106,0,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 90% 100%, rgba(255,154,31,0.08) 0%, transparent 60%),
    linear-gradient(160deg, #100600 0%, #1C0B00 35%, #120700 65%, #0E0500 100%);
  border-top: 1px solid rgba(255,106,0,0.28);
  position: relative;
  overflow: hidden;
}

/* Horizontal divider grain line */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,106,0,0.5) 30%, rgba(255,154,31,0.3) 70%, transparent);
  pointer-events: none;
}

/* ── Top section: tagline + sitemap grid ── */
.footer-top {
  display: flex;
  align-items: flex-start;
  gap: 64px;
  padding: 64px 56px 52px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Left: Big bold headline */
.footer-tagline {
  flex-shrink: 0;
  width: 260px;
}
.footer-overline {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  color: rgba(255,106,0,0.65);
  margin-bottom: 18px;
  font-family: 'Space Grotesk', sans-serif;
  text-transform: uppercase;
}
.footer-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.025em;
  color: #fafafa;
  text-transform: uppercase;
}

/* Right: 4-column sitemap */
.footer-sitemap {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 36px;
}
.footer-col-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  color: rgba(255,106,0,0.75);
  margin-bottom: 16px;
  text-transform: uppercase;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-link {
  font-size: 13px;
  color: rgba(250,250,250,0.5);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  padding: 0;
  background: none;
  border: none;
  font-family: inherit;
  transition: color .15s;
  line-height: 1.4;
  white-space: nowrap;   /* 긴 라벨(JP "編集(リアルタイムプレビュー)" 등) 1줄 — grid 1fr 트랙 재분배·모바일은 아래 normal 오버라이드 */
}
.footer-link:hover { color: #fafafa; }
/* 푸터 [고객지원] 라벨 교차 페이드(KR 고객지원↔CONTACT · EN CONTACT↔SUPPORT) — 스팬 2장 grid 겹침=폭은 긴 쪽 고정(레이아웃 시프트 0)·8초 주기·모션 민감=고정 표시 */
.ftr-swap { display: inline-grid; text-align: left; }
.ftr-swap > span { grid-area: 1 / 1; white-space: nowrap; }
.ftr-swap-a { animation: ftrSwapA 8s ease-in-out infinite; }
.ftr-swap-b { animation: ftrSwapB 8s ease-in-out infinite; opacity: 0; }
@keyframes ftrSwapA { 0%, 42% { opacity: 1; } 50%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ftrSwapB { 0%, 42% { opacity: 0; } 50%, 92% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ftr-swap-a, .ftr-swap-b { animation: none !important; }
  .ftr-swap-a { opacity: 1; }
  .ftr-swap-b { opacity: 0; }
}
/* 최하단 법적 푸터 [문의하기] 4단어 순환(문의하기·고객지원·제휴·견적문의 / CONTACT·SUPPORT·PARTNER·QUOTE) — 사이트맵 .ftr-swap과 동일 원리(스팬 grid 겹침·폭 고정)를 4개로 확장. 12초 주기(단어당 3초)·prefers-reduced-motion=1번 고정. */
.ftr-cycle { display: inline-grid; text-align: left; }
.ftr-cycle > span { grid-area: 1 / 1; white-space: nowrap; opacity: 0; }
.ftr-cycle .ftr-cy-1 { animation: ftrCycle1 28s ease-in-out infinite; }
.ftr-cycle .ftr-cy-2 { animation: ftrCycle2 28s ease-in-out infinite; }
.ftr-cycle .ftr-cy-3 { animation: ftrCycle3 28s ease-in-out infinite; }
.ftr-cycle .ftr-cy-4 { animation: ftrCycle4 28s ease-in-out infinite; }
@keyframes ftrCycle1 { 0% { opacity: 0; } 2%, 21% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes ftrCycle2 { 0%, 25% { opacity: 0; } 27%, 46% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes ftrCycle3 { 0%, 50% { opacity: 0; } 52%, 71% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes ftrCycle4 { 0%, 75% { opacity: 0; } 77%, 96% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ftr-cycle > span { animation: none !important; opacity: 0; }
  .ftr-cycle .ftr-cy-1 { opacity: 1; }
}
/* KR = 3단어만 순환(문의하기 삭제·고객지원 먼저) — EN은 위 4단어(ftrCycle1~4) 그대로 유지. lang 속성은 i18n.js가 <html lang> 에 부여(2909행대 로직과 별개 확정 사실). */
html[lang="ko"] .ftr-cycle .ftr-cy-1 { animation: ftrCycleKo1 21s ease-in-out infinite; }
html[lang="ko"] .ftr-cycle .ftr-cy-2 { animation: ftrCycleKo2 21s ease-in-out infinite; }
html[lang="ko"] .ftr-cycle .ftr-cy-3 { animation: ftrCycleKo3 21s ease-in-out infinite; }
html[lang="ko"] .ftr-cycle .ftr-cy-4 { display: none; }
@keyframes ftrCycleKo1 { 0% { opacity: 0; } 2%, 31% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes ftrCycleKo2 { 0%, 33% { opacity: 0; } 35%, 64% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes ftrCycleKo3 { 0%, 67% { opacity: 0; } 69%, 98% { opacity: 1; } 100% { opacity: 0; } }

/* ── Bottom bar: logo + copyright ── */
.footer-bottom-wrap {
  border-top: 1px solid rgba(255,255,255,0.06);
}
.footer-bottom {
  padding: 22px 56px;
  max-width: 1200px;
  margin: 0 auto;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}
.footer-logo-link { display: inline-flex; flex-shrink: 0; line-height: 0; transition: transform .15s ease, filter .15s ease; }
.footer-logo-link:hover { transform: translateY(-1px); }
.footer-logo-link:hover .footer-logo { filter: drop-shadow(0 3px 14px rgba(255,106,0,0.45)); }
.footer-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 10px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 10px rgba(255,106,0,0.28));
}
.footer-brand-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.footer-present {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,106,0,0.85);
  letter-spacing: .05em;
}
.footer-copyright {
  font-size: 11px;
  color: rgba(255,255,255,0.28);
  letter-spacing: .01em;
}

/* ── Footer Responsive ── */
@media (max-width: 1024px) {
  .footer-top { gap: 40px; padding: 48px 32px 40px; }
  .footer-sitemap { grid-template-columns: repeat(2, 1fr); gap: 28px 36px; }
  .footer-bottom { padding: 20px 32px; }
}
@media (max-width: 767px) {
  .footer-top {
    flex-direction: column;
    gap: 32px;
    padding: 36px 24px 28px;
    box-sizing: border-box;
    width: 100%;
  }
  .footer-tagline { width: 100%; }
  .footer-headline { font-size: 26px; }
  .footer-sitemap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 20px;
    width: 100%;
    box-sizing: border-box;
  }
  .footer-col { width: 100%; min-width: 0; }
  .footer-col-title {
    font-size: 10px;
    margin-bottom: 12px;
  }
  .footer-link {
    font-size: 13px;
    font-family: var(--font-body);
    white-space: normal;
    word-break: keep-all;
  }
  .footer-bottom-wrap { width: 100%; box-sizing: border-box; }
  .footer-bottom { padding: 18px 24px; }
  .footer-logo { width: 44px; height: 44px; }
  .footer-present { font-size: 12px; }
  .footer-copyright { font-size: 10.5px; }
}
@media (max-width: 400px) {
  .footer-top { padding: 28px 16px 24px; }
  .footer-headline { font-size: 22px; }
  .footer-sitemap { grid-template-columns: 1fr 1fr; gap: 20px 14px; }
  .footer-link { font-size: 12px; }
  .footer-bottom { padding: 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   USAGE DASHBOARD — Bento Grid + Glassmorphism + Conic Charts
   Ref: 2026 dashboard trends (Muzli, Tubik, Aceternity UI)
   ═══════════════════════════════════════════════════════════════ */

/* ── Page wrapper ── */
.ud-page {
  max-width: 960px; margin: 0 auto;
  padding: 28px 24px 48px;
}
@media (max-width: 640px) { .ud-page { padding: 20px 16px 40px; } }

/* ── Header ── */
.ud-header {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 16px;
  margin-bottom: 28px;
}
.ud-reset-btn {
  flex-shrink: 0; margin-top: 6px;
  font-size: 11.5px; color: #52525b; padding: 6px 14px;
  border-radius: 8px; border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03);
  transition: color .15s, border-color .15s, background .15s;
  cursor: pointer; font-family: inherit;
}
.ud-reset-btn:hover { color: #fca5a5; border-color: rgba(252,165,165,0.3); background: rgba(252,165,165,0.06); }

/* ── 크레딧 팩 ── */
.ud-credit-section { margin-bottom: 24px; }
.ud-pack-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px; margin-top: 10px;
}
@media (max-width: 900px) { .ud-pack-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .ud-pack-grid { grid-template-columns: repeat(2, 1fr); } }
/* Premium Subscription Design */
.ud-pack-card {
  background: rgba(10,11,14,0.85);
  border: 1px solid rgba(255,255,255,0.08);
  border-top-color: rgba(255,255,255,0.12);
  border-radius: 16px; padding: 18px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  position: relative; text-align: center;
  transition: border-color .2s, transform .18s, box-shadow .2s;
  overflow: hidden;
}
.ud-pack-card::before {
  content: '';
  position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  pointer-events: none;
}
.ud-pack-card:hover {
  border-color: rgba(255,106,0,0.28);
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.5), 0 0 22px -6px rgba(255,106,0,0.16);
}
.ud-pack-popular {
  border-color: rgba(255,106,0,0.40) !important;
  background: linear-gradient(145deg, rgba(255,106,0,0.10) 0%, rgba(10,11,14,0.85) 55%);
  box-shadow: 0 0 32px -10px rgba(255,106,0,0.22);
}
.ud-pack-badge {
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
  color: #FF6A00; text-transform: uppercase;
  position: absolute; top: 10px; right: 10px;
  background: rgba(255,106,0,0.10);
  border: 1px solid rgba(255,106,0,0.24);
  padding: 2px 7px; border-radius: 5px;
}
.ud-pack-credits {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 24px; font-weight: 800; color: #F5F5F0;
  letter-spacing: -.03em;
  text-shadow: 0 0 28px rgba(255,106,0,0.22);
}
.ud-pack-credits span { font-size: 11px; font-weight: 500; color: #52525b; margin-left: 2px; }
.ud-pack-price { font-size: 13px; font-weight: 600; color: #DDDDE8; }
.ud-pack-bonus { font-size: 10px; color: #FF6A00; font-weight: 600; }
.ud-pack-btn {
  width: 100%; padding: 8px 0; border-radius: 9px; font-size: 12px; font-weight: 600;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09);
  color: #52525b; cursor: not-allowed; margin-top: 4px;
  font-family: var(--font-body); letter-spacing: .04em;
}
.ud-pack-btn-main {
  background: rgba(255,106,0,0.12); border-color: rgba(255,106,0,0.28); color: #FF6A00;
}

/* ── Glassmorphism base ── */
.ud-glass {
  background: rgba(14,15,18,0.72);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  position: relative; overflow: hidden;
}
.ud-glass::before {
  content: '';
  position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  pointer-events: none;
}

/* ── Bento top: hero + 2 KPI ── */
.ud-bento-top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 14px;
  margin-bottom: 14px;
}
.ud-hero-card {
  grid-column: 1 / -1;   /* 총 API 호출 KPI 삭제 → 히어로가 전체 폭(빈칸 방지) */
  padding: 28px 28px 24px;
  background: linear-gradient(145deg, rgba(255,106,0,0.10) 0%, rgba(14,15,18,0.72) 60%),
              rgba(14,15,18,0.72);
}
.ud-hero-label {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  color: rgba(255,106,0,0.65); text-transform: uppercase;
  margin-bottom: 10px;
}
.ud-hero-amount {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 6px;
}
#ud-hero-usd {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 44px; font-weight: 800; letter-spacing: -.04em;
  color: #fafafa;
  text-shadow: 0 0 40px rgba(255,106,0,0.28);
}
#ud-hero-krw {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px; font-weight: 600;
  color: rgba(255,106,0,0.8);
}
.ud-hero-meta { font-size: 11px; color: #52525b; margin-bottom: 16px; }
/* Stacked bar */
.ud-stack-bar {
  height: 8px; border-radius: 8px; overflow: hidden;
  background: rgba(255,255,255,0.07);
  display: flex;
}
.ud-stack-seg {
  height: 100%;
  transition: width .8s cubic-bezier(.4,0,.2,1);
}
.ud-stack-legend {
  display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px;
}
.ud-stack-legend-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; color: #71717a;
}
.ud-stack-legend-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}

/* KPI cards */
.ud-kpi-card {
  padding: 20px;
  display: flex; flex-direction: column;
  justify-content: flex-end;
}
.ud-kpi-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(255,255,255,0.05);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.ud-kpi-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 28px; font-weight: 700; letter-spacing: -.03em;
  color: #fafafa; margin-bottom: 4px;
}
.ud-kpi-label { font-size: 11px; color: #52525b; }

@media (max-width: 640px) {
  .ud-bento-top { grid-template-columns: 1fr 1fr; }
  .ud-hero-card { grid-column: span 2; }
  #ud-hero-usd { font-size: 32px; }
}

/* ── Category donut grid ── */
.ud-cat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 900px) { .ud-cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px)  { .ud-cat-grid { grid-template-columns: repeat(2, 1fr); } }

/* Category card */
.ud-cat-card {
  padding: 18px 14px 16px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
  cursor: default;
}
.ud-cat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.48);
}

/* CSS conic-gradient donut chart (MDN verbatim)
   mask: radial-gradient cuts inner circle to create donut */
.ud-donut-wrap {
  position: relative; margin-bottom: 14px;
}
.ud-donut {
  width: 72px; height: 72px;
  border-radius: 50%;
  /* background set by JS: conic-gradient(color PCT%, track 0) */
  background: conic-gradient(rgba(255,255,255,0.07) 100%);
  -webkit-mask: radial-gradient(circle, transparent 48%, #fff 49%);
  mask: radial-gradient(circle, transparent 48%, #fff 49%);
  transition: background .7s cubic-bezier(.4,0,.2,1);
}
.ud-donut-pct {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px; font-weight: 700; color: #fafafa;
  pointer-events: none;
}
.ud-cat-name {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3);
  margin-bottom: 8px;
}
.ud-cat-usd {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px; font-weight: 700; color: #fafafa; letter-spacing: -.02em;
}
.ud-cat-krw { font-size: 11px; color: rgba(255,106,0,0.7); margin-top: 2px; }
.ud-cat-stat { font-size: 11px; color: var(--text-3); margin-top: 4px; }

/* ── Horizontal bar comparison chart ── */
.ud-hbar-section {
  padding: 20px 24px 22px;
  margin-bottom: 14px;
}
.ud-section-title {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  color: var(--text-3); text-transform: uppercase;
  margin-bottom: 18px;
}
.ud-hbar-rows { display: flex; flex-direction: column; gap: 12px; }
.ud-hbar-row {
  display: grid;
  grid-template-columns: 110px 1fr max-content;   /* 값 컬럼 = 콘텐츠 폭(JP "N クレジット" 등 긴 라벨 1줄 보장) */
  align-items: center; gap: 12px;
}
@media (max-width: 520px) {
  .ud-hbar-row { grid-template-columns: 80px 1fr max-content; }
}
.ud-hbar-label {
  font-size: 11px; color: var(--text-2); text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ud-hbar-track {
  height: 8px; border-radius: 8px;
  background: rgba(255,255,255,0.06); overflow: hidden;
  position: relative;
}
.ud-hbar-fill {
  height: 100%; border-radius: 8px;
  transition: width .9s cubic-bezier(.4,0,.2,1);
  position: relative; overflow: hidden;
  min-width: 4px;
}
/* Shimmer sweep on bar */
.ud-hbar-fill::after {
  content: '';
  position: absolute; top: 0; right: -100%; bottom: 0; width: 60%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  animation: ud-shimmer 2.4s ease-in-out infinite;
}
@keyframes ud-shimmer {
  0%   { right: 120%; }
  60%  { right: -120%; }
  100% { right: -120%; }
}
.ud-hbar-val {
  font-size: 11px; font-weight: 600; color: #fafafa;
  text-align: right; font-variant-numeric: tabular-nums;
  white-space: nowrap;   /* 값+단위 항상 1줄 */
}

/* ── Model detail table ── */
.ud-table-wrap {
  overflow: hidden;
  margin-bottom: 14px;
  padding: 20px 24px 14px;       /* hbar-section과 동일 인셋(24px) — 제목·열 정렬 통일 */
}
.ud-table-row {
  display: grid;
  grid-template-columns: 1fr 70px 120px 120px;  /* 모델 / 호출 / 사용량 / 값(원화·토큰) — 빈 컬럼 제거 */
  gap: 10px; align-items: center;
  padding: 12px 0;               /* 가로 패딩은 wrap(24px)이 담당 → 제목·hbar와 동일 좌측 정렬 */
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 13px;
}
.ud-table-row:last-child { border-bottom: none; }
/* 게스트/회원: 사용량(처리량 tok/장/초) 컬럼 숨김 → 모델/호출/크레딧만 (크레딧으로만 표기) */
.ud-hide-usage .ud-table-row { grid-template-columns: 1fr 70px 120px; }
.ud-hide-usage .ud-table-row span:nth-child(3) { display: none; }
.ud-table-head {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: var(--text-3); text-transform: uppercase;
  padding-top: 4px; padding-bottom: 10px;   /* 회색 배경 strip 제거 — 박스 균일 다크 통일 (행 하단 border로 구분) */
}
.ud-table-row span:first-child { color: #e4e4e7; font-weight: 500; }
.ud-table-row span:not(:first-child) { text-align: right; color: var(--text-3); }
.ud-table-row span:nth-child(4) { color: #fafafa; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .ud-table-row { grid-template-columns: 1fr auto; }   /* 모바일: 모델 + 값만 */
  .ud-table-row span:nth-child(2),
  .ud-table-row span:nth-child(3) { display: none; }
}

/* ── Empty state ── */
.ud-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 80px 20px; gap: 14px; text-align: center;
}
.ud-empty-icon {
  width: 64px; height: 64px; border-radius: 18px;
  background: rgba(255,106,0,0.08);
  border: 1px solid rgba(255,106,0,0.14);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,106,0,0.4);
}
.ud-empty-title { font-size: 15px; font-weight: 600; color: #71717a; }
.ud-empty-sub   { font-size: 12px; color: #3f3f46; }

/* ── Home usage mini widget — Bento glassmorphism 2026 ── */
.home-ud-widget {
  position: relative; overflow: hidden;
  background: rgba(14,15,18,0.75);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 20px 22px 18px;
  cursor: pointer;
  transition: border-color .2s, transform .18s ease, box-shadow .2s;
}
/* orange ambient top-left glow */
.home-ud-widget::after {
  content: '';
  position: absolute; top: -40px; left: -30px;
  width: 180px; height: 140px;
  background: radial-gradient(ellipse, rgba(255,106,0,0.14) 0%, transparent 70%);
  pointer-events: none;
}
/* top highlight line */
.home-ud-widget::before {
  content: '';
  position: absolute; top: 0; left: 14%; right: 14%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  pointer-events: none;
}
.home-ud-widget:hover {
  border-color: rgba(255,106,0,0.26);
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.48), 0 0 0 1px rgba(255,106,0,0.08);
}
.home-ud-top {
  display: flex; align-items: flex-start;
  justify-content: space-between; margin-bottom: 16px;
  position: relative; z-index: 1;
}
.home-ud-amounts { display: flex; align-items: baseline; gap: 8px; }
.home-ud-usd {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 28px; font-weight: 800; color: #fafafa;
  letter-spacing: -.04em;
  text-shadow: 0 0 32px rgba(255,106,0,0.22);
}
.home-ud-krw {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px; font-weight: 600;
  color: rgba(255,106,0,0.75);
}
.home-ud-link {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; color: #3f3f46;
  padding: 5px 10px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
  transition: color .14s, border-color .14s, background .14s;
  flex-shrink: 0; margin-left: 8px;
  white-space: nowrap;
}
.home-ud-link:hover { color: #a1a1aa; border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.06); }
.home-ud-empty {
  font-size: 11.5px; color: #3f3f46;
  position: relative; z-index: 1;
}
/* bar track — taller, more dramatic */
.home-ud-bar-track {
  height: 10px; border-radius: 10px; overflow: hidden;
  background: rgba(255,255,255,0.06); display: flex;
  position: relative; z-index: 1;
}
/* shimmer on bar */
.home-ud-bar-track::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 40%, rgba(255,255,255,0.06) 50%, transparent 60%);
  background-size: 200% 100%;
  animation: hm-bar-shimmer 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hm-bar-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.home-ud-legend {
  display: flex; flex-wrap: wrap; gap: 6px 12px;
  margin-top: 10px; position: relative; z-index: 1;
}
.home-ud-legend-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; color: #52525b;
}
.home-ud-legend-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════
   HOME 2026 — HFLUX Premium Cinematic
   Brand: #FF6A00/#FF9A1F/#8B2C44/#46122B — Higgsfield·Linear·Vercel
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero: Cinematic Product Showcase ── */
.hm-hero {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  height: 480px;
  margin-bottom: 20px;
  border: 1px solid rgba(255,106,0,0.20);
  box-shadow:
    0 0 0 1px rgba(255,106,0,0.06) inset,
    0 48px 96px rgba(0,0,0,0.68),
    0 0 72px -24px rgba(255,106,0,0.16);
}
@media (max-width: 640px) { .hm-hero { height: 310px; } }

/* Dot grid — radial-gradient */
.hm-dot-grid {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.065) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask: linear-gradient(180deg, transparent 15%, rgba(0,0,0,0.5) 100%);
  mask: linear-gradient(180deg, transparent 15%, rgba(0,0,0,0.5) 100%);
}

/* Image slider */
.hm-hero-slides { position: absolute; inset: 0; }
/* Hero 실생성물 비디오 4편 크로스페이드 (2026-07-10) — ::before 그라데이션이 텍스트 가독 담당 */
.hm-hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: contrast(1.06) brightness(0.68) saturate(1.05);
  opacity: 0; transition: opacity 1.2s ease;
}
.hm-hero-video.hv-active { opacity: 1; }

/* Cinematic vignette overlay — brand board 참조 */
.hm-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(0deg, rgba(5,5,7,0.97) 0%, rgba(5,5,7,0.52) 36%, rgba(5,5,7,0.10) 62%, transparent 100%),
    linear-gradient(90deg, rgba(5,5,7,0.60) 0%, transparent 52%);
  pointer-events: none;
}

/* Film grain */
.hc-grain {
  position: absolute; inset: 0; z-index: 2;
  opacity: 0.10;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Bold text overlay */
.hm-hero-overlay {
  position: absolute;
  bottom: 52px; left: 38px; right: 38px;
  z-index: 3;
}
@media (max-width: 640px) { .hm-hero-overlay { left: 22px; right: 22px; bottom: 38px; } }

/* REC eyebrow — 브랜드 보드 REC 인디케이터 */
.hm-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 8px; font-weight: 700; letter-spacing: .22em;
  color: rgba(255,106,0,0.72); margin-bottom: 16px;
  font-family: 'Space Grotesk', monospace;
  text-transform: uppercase;
}
.hm-hero-eyebrow::before {
  content: '';
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #FF6A00;
  box-shadow: 0 0 10px #FF6A00;
  animation: rec-blink 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes rec-blink {
  0%,100% { opacity: 1; box-shadow: 0 0 10px #FF6A00, 0 0 20px rgba(255,106,0,0.4); }
  50%      { opacity: 0.35; box-shadow: 0 0 4px #FF6A00; }
}

.hm-hero-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(46px, 9.5vw, 92px);
  font-weight: 800; letter-spacing: .04em;
  line-height: 0.90;
  display: flex; align-items: baseline; gap: 0;
  margin-bottom: 18px;
}
.hm-hero-young {
  color: #FF6A00;
  font-weight: 800;
  text-shadow: 0 0 44px rgba(255,106,0,0.62), 0 0 96px rgba(255,106,0,0.22);
}
/* 원본 로고 이미지 — 히어로 배너 */
.hm-hero-logo-img {
  display: block;
  max-width: min(520px, 72vw);
  height: auto;
  filter: drop-shadow(0 0 32px rgba(255,106,0,0.55));
  position: relative; z-index: 1;   /* 글로우(::before) 위, 광택 스윕(::after) 아래 */
}

/* ── 메인 히어로 로고 신기술: 흐르는 글로우(@property 회전) + 광택 스윕(sheen) ──
   브랜드명 FLUX(흐름) 컨셉. CSS만(JS 0). @property=Chrome/Edge/Safari, Firefox는 정적 글로우 폴백.
   절대배치 의사요소라 .hm-hero-title 의 flex 레이아웃에 무영향. prefers-reduced-motion 존중. */
@property --hflux-glow-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.hm-hero-title { position: relative; isolation: isolate; }
/* 1) 흐르는 글로우 — 로고 뒤 주황 conic 그라디언트가 천천히 회전 */
.hm-hero-title::before {
  content: ''; position: absolute; z-index: 0;
  inset: -46% -6%; border-radius: 999px; pointer-events: none;
  background: conic-gradient(from var(--hflux-glow-angle),
    rgba(255,106,0,0) 0deg, rgba(255,106,0,.50) 70deg,
    rgba(255,154,31,.26) 150deg, rgba(255,106,0,.50) 250deg,
    rgba(255,106,0,0) 360deg);
  filter: blur(40px); opacity: .9;
  animation: hflux-glow-rot 7s linear infinite;
}
@keyframes hflux-glow-rot { to { --hflux-glow-angle: 360deg; } }
/* 2) 광택 스윕 — 로고 실루엣에 마스크된 흰 빛이 좌→우로 주기적으로 스침 */
.hm-hero-title::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  max-width: min(520px, 72vw);   /* 로고 박스와 동일 폭 → 마스크 정렬 */
  background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.72) 50%, transparent 60%);
  background-size: 220% 100%; background-repeat: no-repeat;
  -webkit-mask: url(/images/hflux-primary-transparent.png) center/contain no-repeat;
          mask: url(/images/hflux-primary-transparent.png) center/contain no-repeat;
  mix-blend-mode: screen;
  animation: hflux-sheen 6s ease-in-out infinite;
}
@keyframes hflux-sheen {
  0%   { background-position: -60% 0; }
  24%, 100% { background-position: 160% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-hero-title::before { animation: none; }   /* 정적 글로우 유지 */
  .hm-hero-title::after  { display: none; }      /* 스윕 제거 */
}

.hm-hero-headline {
  font-family: var(--font-display);
  font-size: clamp(17px, 2.5vw, 27px);
  font-weight: 700; color: rgba(245,245,240,0.96);
  letter-spacing: -0.025em; line-height: 1.20;
  margin: 10px 0 10px;
  text-shadow: 0 2px 24px rgba(0,0,0,0.85);
}
.hm-hero-ai {
  color: var(--acc);
  text-shadow: 0 0 28px rgba(255,106,0,0.7);
}
.hm-hero-tagline {
  font-size: 11.5px; color: rgba(255,255,255,0.38); line-height: 1.6;
  letter-spacing: 0.06em;
  font-family: 'Space Grotesk', sans-serif;
  text-transform: uppercase;
}

/* Clapperboard bottom strip — brand maroon */
.hm-hero-strip {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 4;
  height: 38px;
  background: repeating-linear-gradient(-45deg,
    rgba(70,18,43,0.30) 0, rgba(70,18,43,0.30) 7px,
    rgba(139,44,68,0.14) 7px, rgba(139,44,68,0.14) 14px);
  border-top: 1px solid rgba(255,106,0,0.22);
  display: flex; align-items: center; padding: 0 16px;
}
.hm-hero-strip span {
  font-size: 7px; font-weight: 700; letter-spacing: .24em;
  color: rgba(255,255,255,0.26); font-family: 'Space Grotesk', monospace;
  text-transform: uppercase;
}

/* ── Stats strip: Executive Dashboard ── */
.hm-stats-strip {
  display: flex; align-items: center;
  gap: 0; margin-bottom: 22px;
  background:
    linear-gradient(135deg, rgba(255,106,0,0.09) 0%, rgba(10,11,14,0.90) 38%),
    rgba(8,9,12,0.90);
  border: 1px solid rgba(255,106,0,0.18);
  border-radius: 16px;
  padding: 22px 30px;
  overflow-x: auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 6px 32px rgba(0,0,0,0.45);
  position: relative;
}
.hm-stats-strip::before {
  content: '';
  position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,106,0,0.40), transparent);
  pointer-events: none;
}
.hm-stat {
  display: flex; flex-direction: column; align-items: center;
  flex: 1; min-width: 66px;
}
.hm-stat-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 28px; font-weight: 800; color: #F5F5F0;
  letter-spacing: -.05em; line-height: 1;
  text-shadow: 0 0 32px rgba(255,106,0,0.30);
}
.hm-stat-label {
  font-size: 9.5px; font-weight: 600; letter-spacing: .10em;
  color: #48484E; margin-top: 7px; white-space: nowrap;
  text-transform: uppercase;
}
.hm-stat-div {
  width: 1px; height: 36px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.09), transparent);
  flex-shrink: 0; margin: 0 6px;
}
/* 모바일: 통계 5개(20·8·13·12·생성횟수)가 한 화면에 — 폰트·간격 축소로 5번째(토큰) 잘림 방지 */
/* ★라벨 겹침 해소(2026-07-26 실측): 데스크톱 nowrap 을 모바일에서 해제 + 7px/letter-spacing 0.
   라틴 문자 라벨(en·de·pt·es·fr)이 칸 폭을 넘어 인접 라벨과 맞닿던 문제 — 375px 최소 간격
   현행 es -22px·fr -12px·pt -13px·de -1px → 수정 후 전 7언어 전부 양수(최소 +3px).
   폰트 축소만으로는 es 가 -4px 로 잔존하므로 nowrap 해제가 필수. strip 높이 97→94px(감소).
   ko·ja 는 라벨이 짧아 1줄 유지(회귀 없음). */
@media (max-width: 767px) {
  .hm-stats-strip { padding: 16px 10px; }
  .hm-stat { min-width: 0; }
  .hm-stat-num { font-size: 20px; }
  .hm-stat-label {
    font-size: 7px; letter-spacing: 0; margin-top: 5px;
    white-space: normal; text-align: center; line-height: 1.25;
  }
  .hm-stat-div { margin: 0 1px; height: 26px; }
}

/* ── Bento grid: Premium AI Tool Cards ── */
.hm-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 232px);
  gap: 10px;
  margin-bottom: 22px;
}
.hm-tile-image,
.hm-tile-shorts,
.hm-tile-audio,
.hm-tile-story,
.hm-tile-scenario,
.hm-tile-edit {
  grid-column: auto; grid-row: auto;
}
.hm-tile-edit { display: flex; }

@media (max-width: 680px) {
  .hm-bento { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 192px); }
  .hm-tile-reward { grid-column: auto; }
}
@media (max-width: 420px) {
  .hm-bento { grid-template-columns: 1fr; grid-template-rows: repeat(7, 172px); }
}

/* Tile: Premium AI Tool Card */
.hm-tile {
  --acc: #888;
  position: relative; overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(10,11,14,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
  display: flex; flex-direction: column;
  transition: transform .24s cubic-bezier(.2,.85,.3,1), border-color .22s, box-shadow .24s;
}
/* top highlight */
.hm-tile::before {
  content: '';
  position: absolute; top: 0; left: 12%; right: 12%; height: 1px; z-index: 3;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.13), transparent);
  pointer-events: none;
}
/* ambient corner glow */
.hm-tile::after {
  content: '';
  position: absolute; top: -56px; right: -56px;
  width: 160px; height: 160px; border-radius: 50%;
  opacity: 0.28; transition: opacity .26s;
  pointer-events: none; z-index: 0;
}
.hm-tile:hover {
  transform: translateY(-7px) scale(1.005);
  box-shadow: 0 28px 64px rgba(0,0,0,0.65), 0 0 0 1px color-mix(in srgb, var(--acc) 35%, transparent), 0 0 40px -10px color-mix(in srgb, var(--acc) 28%, transparent);
}
.hm-tile:hover::after { opacity: 1; }
.hm-tile:hover .hm-tile-arrow { opacity: 1; transform: translateX(4px); color: var(--acc); }

/* per-tile accents — all use orange brand family for coherence */
.hm-tile-image    { --acc: #FF6A00; border-color: rgba(255,106,0,0.18); }
.hm-tile-image::after  { background: radial-gradient(circle, rgba(255,106,0,0.28), transparent 66%); }
.hm-tile-image:hover   { border-color: rgba(255,106,0,0.52); }

.hm-tile-shorts    { --acc: #FF9A1F; border-color: rgba(255,154,31,0.18); }
.hm-tile-shorts::after  { background: radial-gradient(circle, rgba(255,154,31,0.26), transparent 66%); }
.hm-tile-shorts:hover   { border-color: rgba(255,154,31,0.52); }

.hm-tile-audio    { --acc: #8B5CF6; border-color: rgba(139,92,246,0.18); }
.hm-tile-audio::after  { background: radial-gradient(circle, rgba(139,92,246,0.24), transparent 66%); }
.hm-tile-audio:hover   { border-color: rgba(139,92,246,0.48); }

.hm-tile-story    { --acc: #06b6d4; border-color: rgba(6,182,212,0.18); }
.hm-tile-story::after  { background: radial-gradient(circle, rgba(6,182,212,0.24), transparent 66%); }
.hm-tile-story:hover   { border-color: rgba(6,182,212,0.48); }

.hm-tile-scenario { --acc: #FBbF24; border-color: rgba(251,191,36,0.18); }
.hm-tile-scenario::after { background: radial-gradient(circle, rgba(251,191,36,0.22), transparent 66%); }
.hm-tile-scenario:hover  { border-color: rgba(251,191,36,0.48); }

.hm-tile-edit     { --acc: #10b981; border-color: rgba(16,185,129,0.18); }
.hm-tile-edit::after { background: radial-gradient(circle, rgba(16,185,129,0.22), transparent 66%); }
.hm-tile-edit:hover  { border-color: rgba(16,185,129,0.48); }

/* REWARD tile — 7번째 벤토 타일: 데스크톱=6타일 아래 전폭(고정 232px 행 아래 auto 행으로 자연 확장), 모바일=다른 타일과 동일 셀(@680/@420에서 grid-column:auto로 리셋) */
.hm-tile-reward   { --acc: #FF6A00; border-color: rgba(255,106,0,0.18); grid-column: 1 / -1; }
.hm-tile-reward::after { background: radial-gradient(circle, rgba(255,106,0,0.28), transparent 66%); }
.hm-tile-reward:hover  { border-color: rgba(255,106,0,0.52); }
/* STORY/FLOW 등 다른 벤토와 동일 처리: 영상 영역(visual)이 위·본문(.hm-tile-body 기본 솔리드 스트립)이 아래. typo는 영상 하단(본문 위·겹침 없음). 단 영상은 YouTube iframe(object-fit:cover 불가)이라 visual을 정확히 16:9로 고정해 좌우 블랙(필러박스) 방지 — 이 16:9만 리워드 고유, 나머지 처리(본문 스트립·typo)는 다른 타일과 동일(오버라이드 없음) */
.hm-tile-reward .hm-tile-visual { flex: none; width: 100%; aspect-ratio: 16/9; }
/* 모바일=다른 6타일과 동일 셀: grid-column:auto(순서상 base 뒤라 실제 적용)로 일반 셀 복귀 + 영상 영역도 flex:1로 셀 채움(썸네일 cover, 다른 타일과 동일 처리). base보다 뒤 위치 필수 */
@media (max-width: 680px) {
  .hm-tile-reward { grid-column: auto; }
  .hm-tile-reward .hm-tile-visual { flex: 1; width: auto; aspect-ratio: auto; }
}

/* Tile visual area */
.hm-tile-visual {
  flex: 1; position: relative; overflow: hidden;
  background: #060607; z-index: 1;
}

/* 실생성물 미디어 타일 (2026-07-10) — 이미지/비디오 공통 cover + 하단 셰이드 */
.hm-tile-media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.hm-media-visual::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
  background: linear-gradient(180deg, transparent, rgba(6,6,7,0.70));
  pointer-events: none;
}
/* 타일 대형 타이포 오버레이 (힉스필드 카드 문법 — 미디어 위 카테고리 워드) */
.hm-tile-typo {
  position: absolute; left: 13px; bottom: 8px; z-index: 2;
  font-size: clamp(20px, 2.1vw, 30px); font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 2px 16px rgba(0,0,0,0.6);
  pointer-events: none; line-height: 1;
}
/* 미디어 타일: 전 기기 영상 재생 (2026-07-10 사용자 지시 — 뷰포트 진입 시에만 play로 데이터 절약) */

/* ── 문의하기 모달 (2026-07-10 v2 — 이메일 컴포즈 스타일: PC 넓은 작성창+아이콘 툴바 · 모바일 풀스크린) ── */
.sup-overlay {
  position: fixed; inset: 0; z-index: 10001;
  background: rgba(6,7,7,0.92);
  align-items: flex-start; justify-content: center;
  overflow-y: auto; padding: 24px 16px; box-sizing: border-box;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.sup-card {
  position: relative; width: 100%; max-width: 720px; margin-top: 4.5vh;
  background: #0e0e10; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px; padding: 30px 32px 24px; box-sizing: border-box;
}
.sup-card.dragover { outline: 2px dashed #FF6A00; outline-offset: -8px; }
.sup-close {
  position: absolute; top: 16px; right: 16px;
  background: none; border: none; color: #71717a; cursor: pointer;
  font-size: 19px; line-height: 1; padding: 6px;
}
.sup-title { font-size: 20px; font-weight: 800; color: #fafafa; margin: 0 0 5px; }
.sup-intro { font-size: 12.5px; color: #a1a1aa; margin: 0 0 18px; line-height: 1.6; }
.sup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sup-label { display: block; font-size: 12.5px; color: #a1a1aa; margin: 15px 0 7px; }
.sup-label-top { margin-top: 0; }
.sup-input {
  width: 100%; box-sizing: border-box; padding: 11px 14px;
  font-size: 14px; color: #fafafa; background: #1c1c1e;
  border: 1px solid rgba(255,255,255,0.1); border-radius: 10px;
  outline: none; font-family: inherit;
}
.sup-input:focus { border-color: rgba(255,106,0,0.5); }
.sup-textarea { resize: vertical; min-height: 300px; line-height: 1.6; }
.sup-previews { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.sup-previews:empty { display: none; }

/* 크리에이터 지원 폼 — 링크 추가 행 + 다중선택 칩(2026-07-10) */
.sup-link-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.sup-link-row .sup-input { flex: 1; }
.sup-link-remove { flex-shrink: 0; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; background: #1c1c1e; color: #a1a1aa; font-size: 14px; cursor: pointer; }
.sup-link-remove:hover { color: #f87171; border-color: rgba(248,113,113,0.4); }
.sup-link-add { margin-top: 2px; font-size: 12.5px; font-weight: 600; color: #FF6A00; background: transparent; border: none; cursor: pointer; padding: 4px 0; }
.sup-link-add:hover { color: #FF9A1F; }
.sup-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.sup-chip { font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); color: #d4d4d8; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.sup-chip:hover { border-color: rgba(255,106,0,0.35); }
.sup-chip.active { background: rgba(255,106,0,0.18); color: #FF6A00; border-color: rgba(255,106,0,0.5); }
#sup-cr-sns-inputs { margin-top: 8px; }
#sup-cr-sns-inputs:empty { display: none; }
#sup-simple-fields:empty { display: none; }
.sup-simple-ta { min-height: 68px; resize: vertical; line-height: 1.5; }
/* 버그 신고 사진 첨부 존 — 기존 첨부 파이프라인(#support-previews) 재사용 */
.sup-attach-zone { display: flex; align-items: center; gap: 11px; padding: 13px 15px; border: 1px dashed rgba(255,106,0,0.35); border-radius: 10px; background: rgba(255,106,0,0.04); cursor: pointer; transition: border-color .15s, background .15s; }
.sup-attach-zone:hover { border-color: rgba(255,106,0,0.6); background: rgba(255,106,0,0.08); }
.sup-attach-zone:focus-visible { outline: 2px solid #FF9A1F; outline-offset: 2px; }
.sup-attach-zone svg { width: 20px; height: 20px; color: #FF6A00; flex-shrink: 0; }
.sup-attach-zone .z-main { font-size: 13px; font-weight: 600; color: #e4e4e7; }
.sup-attach-zone .z-sub { display: block; font-size: 11.5px; color: #8a8a9e; margin-top: 2px; }
.sup-sns-lab { flex-shrink: 0; width: 92px; font-size: 12px; font-weight: 600; color: #FF6A00; }
.sup-sns-row .sup-input { flex: 1; }
.sup-prev { position: relative; width: 68px; height: 68px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,0.12); }
.sup-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sup-prev button {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px;
  border-radius: 50%; border: none; background: rgba(0,0,0,0.68); color: #fff;
  font-size: 11px; line-height: 1; cursor: pointer; padding: 0;
}
.sup-err { font-size: 12.5px; color: #f87171; margin-top: 10px; }
.sup-err:empty { display: none; }
/* 하단 툴바 — Gmail 컴포즈 문법: 종이비행기 보내기 pill + 클립 첨부 아이콘 */
.sup-toolbar {
  display: flex; align-items: center; gap: 6px;
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.sup-send {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 24px; border-radius: 999px;
  background: #FF6A00; color: #fff; border: none; cursor: pointer;
  font-size: 14.5px; font-weight: 700; font-family: inherit;
}
.sup-send:hover { background: #ff7d1f; }
.sup-send svg { width: 16px; height: 16px; }
.sup-tool {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: none; background: none; color: #a1a1aa; cursor: pointer;
}
.sup-tool:hover { background: rgba(255,255,255,0.08); color: #fafafa; }
.sup-tool svg { width: 19px; height: 19px; }
/* 마우스오버 툴팁 (data-tip) */
.sup-tip { position: relative; }
.sup-tip:hover::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%);
  background: #26262a; color: #e4e4e7; font-size: 11.5px; font-weight: 500;
  padding: 6px 10px; border-radius: 6px; white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45); pointer-events: none; z-index: 5;
}
/* 모바일 = 풀스크린 컴포즈 (Gmail 모바일 문법) */
@media (max-width: 680px) {
  .sup-overlay { padding: 0; }
  .sup-card {
    max-width: none; min-height: 100dvh; margin: 0;
    border-radius: 0; border: none;
    display: flex; flex-direction: column;
    padding: 20px 18px calc(14px + env(safe-area-inset-bottom));
  }
  .sup-grid { grid-template-columns: 1fr; gap: 0; }
  .sup-grid > div + div { margin-top: 14px; }
  .sup-textarea { flex: 1; min-height: 170px; }
  .sup-toolbar { margin-top: auto; }
  .sup-tip:hover::after { display: none; }   /* 터치 기기: hover 툴팁 비표시 */
}

/* 인라인 도움말 툴팁 (.htip · ? 아이콘) — 소비자 컨텍스트 힌트 (2026-07-16)
   기존 .sup-tip[data-tip] + i18n-tip 배선(i18n.js) 확장 재사용 · 멀티라인 · 모바일 탭(focus) 지원 */
.htip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex: 0 0 auto; margin-left: 5px; padding: 0;
  border-radius: 50%; border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.04); color: #9A9A95;
  font-size: 10.5px; font-weight: 700; line-height: 1; font-family: inherit;
  cursor: help; vertical-align: middle; position: relative;
  transition: color .12s, border-color .12s;
}
.htip:hover, .htip:focus-visible { color: #FF6A00; border-color: rgba(255,106,0,0.5); outline: none; }
.htip:hover::after, .htip:focus-visible::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 8px); left: 0; right: auto; transform: none;
  width: max-content; max-width: 260px; white-space: normal; text-align: left;
  background: #26262a; color: #e4e4e7;
  font-size: 12px; font-weight: 500; line-height: 1.55;
  padding: 9px 12px; border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 6px 22px rgba(0,0,0,0.5);
  pointer-events: none; z-index: 50;
}
/* 오른쪽 컬럼 앵커 = 아이콘 오른쪽 기준 왼쪽 전개(우측 화면 잘림 방지) */
.htip-le:hover::after, .htip-le:focus-visible::after { left: auto; right: 0; }
/* 하단 근처 앵커 = 위로 열기(스크롤 컨테이너 overflow 하단 클리핑 방지 · JS가 .htip-up 토글) */
.htip-up:hover::after, .htip-up:focus-visible::after { top: auto; bottom: calc(100% + 8px); }
/* 모바일(≤680) = 탭(focus)로 표시 · 폭을 화면 안에 안전 제한(좌·우 컬럼 모두 잘림 없이) */
@media (max-width: 680px) {
  .htip:hover::after, .htip:focus-visible::after { max-width: min(220px, calc(100vw - 40px)); }
}

/* Partner AI engines 스트립 (2026-07-10) */
.hm-engines {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 2px 22px;
}
.hm-engines-label {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: #52525b; white-space: nowrap;
}
.hm-engines-logos { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px; }
.hm-engines-logos img {
  filter: brightness(0) invert(1); opacity: .8;
  display: block; width: auto; height: 18px;   /* 심볼 높이 통일 (2026-07-10) */
}
.hm-engines-logos img.hm-engine-sm { height: 14px; }   /* xAI 마크 시각 보정 */
.hm-engines-logos img.hm-engine-wm { height: 12px; }   /* MiniMax 워드마크 = 이름 텍스트 시각 등가 */
.hm-engine { display: inline-flex; align-items: center; gap: 7px; }
.hm-engine em {
  font-style: normal; font-size: 12px; font-weight: 600;
  letter-spacing: .02em; color: #8a8a93;
}
.hm-engine .hm-engine-word {
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em; color: #c9c9d1; opacity: .8;
}
/* 모바일: 라벨 한 줄 + 로고 3열 그리드 정렬 (2026-07-10 — 랩 줄 시작점 불균형 수정) */
@media (max-width: 680px) {
  .hm-engines { display: block; }
  .hm-engines-label { display: block; margin-bottom: 12px; }
  .hm-engines-logos {
    display: grid; grid-template-columns: repeat(3, auto);
    justify-content: space-between; align-items: center; gap: 16px 10px;
  }
}

/* Tile pixel grid — image tile */
.hm-tile-pixel-grid {
  position: absolute; inset: 20px 10px 10px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr); gap: 3px;
}
.hm-tile-pixel-grid span {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 3px;
}
.hm-tile-pixel-grid span:nth-child(3),
.hm-tile-pixel-grid span:nth-child(7) {
  background: rgba(255,106,0,0.30);
  border-color: rgba(255,106,0,0.58);
  box-shadow: 0 0 7px rgba(255,106,0,0.32);
}

/* Tile bottom body */
.hm-tile-body {
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(255,255,255,0.055);
  background: rgba(6,6,8,0.97);
  position: relative; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between;
}
.hm-tile-body-left { flex: 1; min-width: 0; }
.hm-tile-num {
  font-size: 9px; font-weight: 700; letter-spacing: .14em;
  color: var(--acc); font-family: 'Space Grotesk', monospace;
  margin-bottom: 4px; opacity: 0.65;
}
.hm-tile-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px; font-weight: 700; letter-spacing: -.015em;
  color: #EDEDEC; line-height: 1.12; margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hm-tile-scenario .hm-tile-title { display: flex; align-items: center; gap: 2px; }   /* 로고 H + FLOW 같은 줄 중앙 정렬(다른 벤토 제목과 baseline 통일) */
.hm-tile-logo { height: calc(1.1em + 2px); width: auto; filter: drop-shadow(0 0 5px rgba(255,106,0,0.7)); }   /* 벤토 HFLOW 제목의 H = 브랜드 로고 + 글로우(+2px 확대) */
.hm-tile-thin { font-weight: 300; color: rgba(250,250,250,0.30); }
.hm-tile-desc { font-size: 10.5px; color: #565660; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-tile-mono { font-family: 'Space Grotesk', sans-serif; }   /* 모델명 라틴 표기 — 모델 클라우드(hm-model-item)와 폰트 통일 */
.hm-tile-arrow {
  font-size: 15px; color: rgba(255,255,255,0.20);
  flex-shrink: 0; margin-left: 8px;
  opacity: 0.42;
  transition: color .18s, transform .18s, opacity .18s;
}

/* ── REWARD 벤토 타일 내부 썸네일 롤링 트랙 (.hm-tile-visual 내부에 위치 — .hm-tile-reward는 위 accent 블록에서 정의) (2026-07-12) ── */
.hm-reward-vp { position: absolute; inset: 0; overflow: hidden; }
.hm-reward-track { display: flex; height: 100%; transition: transform 3s cubic-bezier(.4,0,.2,1); }
.hm-reward-track > div { position: relative; min-width: 100%; height: 100%; overflow: hidden; background: #000; }
.hm-reward-track img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-reward-track iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* 모바일 라이브 iframe = cover 크롭(절대중앙 + 16:9 고정 + min 100%×100% → 임의 셀 비율에서 필러박스 0). 데스크톱은 셀 자체가 16:9라 위 기본 inset:0 유지. ★반드시 위 기본 규칙보다 뒤에 위치(동일 특이성 캐스케이드) (2026-07-12) */
@media (max-width: 680px) {
  .hm-reward-track iframe { inset: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); width: auto; height: auto; min-width: 100%; min-height: 100%; aspect-ratio: 16 / 9; }
}

/* ── 리워드 쇼케이스 캐러셀 (REWARD 탭 · 16:9 · 자동 롤링 · preview.html RWC 이식) (2026-07-11 로컬) ── */
.rwc { position: relative; width: 100%; margin: 6px 0 4px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,0.09); background: #000; }
.rwc-vp { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.rwc-track { display: flex; height: 100%; transition: transform 3s cubic-bezier(.4,0,.2,1); }
.rwc-slide { position: relative; min-width: 100%; height: 100%; overflow: hidden; background: #000; }
.rwc-slide .fg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; display: block; }
.rwc-slide.portrait .fg { object-fit: contain; }
.rwc-slide .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(30px) brightness(.45); transform: scale(1.2); z-index: 1; display: none; }
.rwc-slide.portrait .bg { display: block; }
.rwc-slide iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; }
.rwc-slide.portrait iframe { inset: 0 auto 0 50%; width: auto; height: 100%; aspect-ratio: 9/16; transform: translateX(-50%); }
.rwc-slide .rwc-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 3; width: 60px; height: 60px; border-radius: 50%; background: rgba(6,7,7,.5); border: 1px solid rgba(255,255,255,.25); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; padding-left: 4px; pointer-events: none; }
.rwc-nav { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 0 2px; }
.rwc-arrow { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,0.09); color: #EDEDEC; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; transition: background .18s, color .18s, border-color .18s; flex: none; }
.rwc-arrow:hover { background: #FF6A00; color: #060707; border-color: #FF6A00; }
.rwc-dots { display: flex; gap: 6px; justify-content: center; align-items: center; }
.rwc-dot { width: 7px; height: 7px; border-radius: 999px; background: rgba(255,255,255,.4); cursor: pointer; transition: width .2s, background .2s; }
.rwc-dot.on { background: #FF6A00; width: 20px; }

/* ── H REWARD 탭 콘텐츠 — preview.html(HFLUX_H_REWARD_런칭콘텐츠) 이식 (2026-07-12 로컬) ── */
/* 로고 락업: H 마크 카드 + REWARD 워드마크 + 글로우(사이드바 .logo-glow 톤앤매너 재사용) */
.rwd-logo { position: relative; display: inline-flex; align-items: center; gap: 14px; margin: 14px 0 18px; padding: 4px 2px; }
.rwd-logo-glow {
  position: absolute; left: -70px; top: -50px; width: 340px; height: 240px; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 42% 52% at 42% 48%, rgba(255,106,0,0.58) 0%, rgba(255,154,31,0.26) 36%, rgba(139,44,68,0.10) 58%, transparent 74%);
  animation: rwdGlowPulse 5s ease-in-out infinite alternate;
}
@keyframes rwdGlowPulse { 0% { opacity: 1; transform: scale(1); } 100% { opacity: .66; transform: scale(1.1); } }
.rwd-hcard {
  position: relative; z-index: 1; background: linear-gradient(145deg,#200E04 0%,#100804 55%,#0B0B0D 100%);
  border: 1px solid rgba(255,106,0,0.34); border-radius: 16px; padding: 8px;
  box-shadow: 0 0 34px rgba(255,106,0,0.30), 0 0 0 1px rgba(255,154,31,0.08) inset, 0 6px 24px rgba(0,0,0,0.75);
}
.rwd-hcard img { display: block; width: 56px; height: 56px; filter: drop-shadow(0 0 10px rgba(255,106,0,0.55)); }
.rwd-rew { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; }
.rwd-rew .rwd-word {
  font-family: var(--font-display); font-size: clamp(20px,3vw,30px); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: #FF6A00; line-height: 1;
  text-shadow: 0 0 22px rgba(255,106,0,0.52), 0 0 46px rgba(255,106,0,0.22);
}
.rwd-rew .rwd-word-sub { font-size: 12px; font-weight: 600; letter-spacing: .38em; color: var(--text-2); }
@media (max-width: 560px) { .rwd-rew .rwd-word-sub { letter-spacing: .24em; font-size: 10px; } }

/* 히어로 헤드라인 */
.rwd-hero { margin: 4px 0 14px; }
.rwd-hero h2 { font-size: clamp(20px,3vw,28px); line-height: 1.2; margin: 0 0 6px; font-weight: 800; letter-spacing: -.5px; }
.rwd-hero h2 b { color: #FF6A00; }
.rwd-hero p { font-size: 14px; color: var(--text-2); margin: 0; }   /* max-width 640px 해제 — EN 서브카피 원문 1줄 표시(사용자 지시 2026-07-12) · 모바일은 화면폭 자연 랩 */

/* R1~R3 카드 */
.rwd-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 14px 0; }
@media (max-width: 900px) { .rwd-cards { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 760px) { .rwd-cards { grid-template-columns: 1fr; } }
.rwd-card { background: var(--surface-1); border: 1px solid rgba(255,255,255,0.09); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.rwd-card .rwd-k { font-size: 10px; letter-spacing: 1.5px; color: #FF6A00; font-weight: 700; }
.rwd-card h3 { margin: 0; font-size: 15px; font-weight: 700; }
.rwd-card p { margin: 0; font-size: 12.5px; color: var(--text-2); flex: 1; }
.rwd-card .btn-primary { width: 100%; margin-top: 4px; }
.rwd-card.primary { border-color: rgba(255,106,0,.5); background: linear-gradient(180deg,rgba(255,106,0,.08),transparent); }

/* R4 리퍼럴 바 */
.rwd-refbar {
  background: var(--surface-1); border: 1px dashed rgba(255,255,255,0.09); border-radius: 12px; padding: 10px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.rwd-refbar span { font-size: 13px; }

/* 참여 CTA */
.rwd-gatebtn { margin: 18px auto 0; display: block; }

/* NOTICE */
.rwd-notices { margin-top: 20px; border-top: 1px solid rgba(255,255,255,0.09); padding-top: 12px; }
.rwd-notices h4 { color: #FF6A00; font-size: 11px; letter-spacing: 1.5px; margin: 0 0 6px; }
.rwd-notices p { font-size: 12px; color: var(--text-2); margin: 0 0 8px; max-width: 720px; }

/* 동의 게이트 모달 (전역 .sd-modal 패턴 재사용 컨벤션 — display:none + .open 토글) */
.rwd-gate { position: fixed; inset: 0; z-index: 10002; background: rgba(0,0,0,.7); display: none; align-items: center; justify-content: center; padding: 20px; }
.rwd-gate.open { display: flex; }
.rwd-gate-box { background: #0d0e10; border: 1px solid rgba(255,255,255,0.09); border-radius: 18px; max-width: 460px; width: 100%; padding: 26px; }
.rwd-gate-box h2 { margin: 0 0 6px; font-size: 20px; }
.rwd-gate-intro { font-size: 13px; color: var(--text-2); margin: 0 0 18px; }
.rwd-gate-intro a { color: #FF6A00; }
.rwd-gate-chk { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid rgba(255,255,255,0.09); border-radius: 10px; margin-bottom: 10px; cursor: pointer; font-size: 13.5px; }
.rwd-gate-chk input { margin-top: 2px; accent-color: #FF6A00; width: 16px; height: 16px; flex-shrink: 0; }
.rwd-gate-req { color: #FF6A00; font-weight: 700; }
.rwd-gate-foot { font-size: 11px; color: var(--text-2); margin: 8px 0 16px; }
.rwd-gate-submit { width: 100%; border: 0; border-radius: 10px; padding: 13px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; background: #2a2b2e; color: #6b6c70; }
.rwd-gate-submit.on { background: #FF6A00; color: #060707; }
.rwd-gate-close { float: right; background: none; border: 0; color: var(--text-2); font-size: 20px; cursor: pointer; }

/* 크리에이터 티어 — 뱃지(사이드바 상시 + REWARD 카드) · 6단계 등급색은 JS(TIER_META) 인라인 (2026-07-12) */
.tier-badge { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; padding: 2px 8px; border: 1px solid; border-radius: 999px; line-height: 1.5; }
.rwd-tier-card { margin: 14px 0 4px; border: 1px solid rgba(255,255,255,0.09); border-radius: 12px; padding: 14px 16px; }
.rwd-tier-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rwd-tier-head .tier-badge { font-size: 12.5px; padding: 3px 12px; }
.rwd-tier-next { font-size: 12px; color: #a1a1aa; }
.rwd-tier-bar { margin-top: 10px; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; }
.rwd-tier-fill { height: 100%; border-radius: 999px; width: 0; transition: width .6s ease; }
.rwd-tier-pending { margin-top: 8px; font-size: 11.5px; color: #FF6A00; }   /* 심사 중 N건 — 승인 대기 상태 투명화(표시 연구 2026-07-12) */

/* H REWARD 히어로 태그라인 + R4 초대 링크 출력 (2026-07-12) */
.rwd-tagline { margin: 10px 0 0; font-size: 14px; font-weight: 600; color: #FF6A00; letter-spacing: .01em; }
.rwd-ref-out { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0 0; }

/* H REWARD 내 제출 내역 (2026-07-12) */
.rwd-mine { margin: 26px 0 0; border: 1px solid rgba(255,255,255,0.09); border-radius: 12px; padding: 16px 18px; }
.rwd-mine h4 { margin: 0 0 10px; font-size: 13px; color: #a1a1aa; letter-spacing: .04em; }
.rwd-mine-row { display: flex; gap: 12px; align-items: center; font-size: 13px; padding: 7px 0; border-top: 1px solid rgba(255,255,255,0.05); flex-wrap: wrap; }
.rwd-mine-row:first-child { border-top: 0; }
.rwd-mine-ax { color: #FF6A00; font-weight: 600; flex-shrink: 0; }
.rwd-mine-t { flex: 1; min-width: 120px; color: #e4e4e7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rwd-mine-d { color: #71717a; font-size: 12px; }

/* REWARD 탭 반응형 — 태블릿: 캐러셀 전폭 복귀 */
@media (max-width: 900px) {
  .rwc { max-width: 100%; }
}
/* REWARD 탭 반응형 — 모바일: 1열 스택 + 추가 컴팩트 */
@media (max-width: 560px) {
  .rwd-logo { gap: 10px; margin: 10px 0 14px; }
  .rwd-hcard { padding: 6px; border-radius: 12px; }
  .rwd-hcard img { width: 40px; height: 40px; }
  .rwd-hero { margin: 2px 0 12px; }
  .rwd-hero h2 { margin: 0 0 4px; }
  .rwd-hero p { font-size: 13px; }
  .rwc { margin: 4px auto 2px; }
  .rwc-nav { padding: 6px 0 0; gap: 10px; }
  .rwd-cards { gap: 8px; margin: 12px 0; }
  .rwd-card { padding: 12px 14px; gap: 5px; }
  .rwd-card h3 { font-size: 14px; }
  .rwd-card p { font-size: 12px; }
  .rwd-refbar { flex-direction: column; align-items: stretch; text-align: center; padding: 10px 12px; }
  .rwd-refbar .btn-primary { width: 100%; }
  .rwd-gatebtn { margin: 14px auto 0; }
  .rwd-notices { margin-top: 14px; padding-top: 10px; }
}

/* ── Section label — visible, branded ── */
.hm-section-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase;
  color: #4A4A54;
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 12px;
}
.hm-section-label::after {
  content: '';
  flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.06) 0%, transparent 80%);
}

/* ── Quick action pills: High-End Creation Links ── */
.hm-pills-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}
@media (max-width: 640px) { .hm-pills-grid { grid-template-columns: repeat(2, 1fr); } }

.hm-pill {
  --acc: #FF6A00;
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px;
  background: rgba(9,10,13,0.90);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  cursor: pointer; width: 100%;
  transition: border-color .22s, transform .16s, box-shadow .22s;
  touch-action: manipulation;
  box-shadow: 0 2px 14px rgba(0,0,0,0.45);
}
.hm-pill[data-nav="prompt"]  { --acc: #FF6A00; }
.hm-pill[data-nav="stock"]   { --acc: #FF6A00; }
.hm-pill[data-nav="ffmpeg"]  { --acc: #FF6A00; }
.hm-pill[data-nav="file"]    { --acc: #FF6A00; }
.hm-pill[data-nav="library"] { --acc: #FF6A00; }
.hm-pill[data-nav="usage"]   { --acc: #FF6A00; }
/* left accent bar — always visible */
.hm-pill::before {
  content: '';
  position: absolute; top: 18%; left: 0; width: 2.5px; bottom: 18%;
  background: linear-gradient(180deg, rgba(255,154,31,0.8), #FF6A00, rgba(139,44,68,0.6));
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 12px rgba(255,106,0,0.65);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity .22s;
}
/* hover gradient */
.hm-pill::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,106,0,0.10) 0%, transparent 60%);
  opacity: 0; transition: opacity .22s;
  pointer-events: none;
}
.hm-pill-icon {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s, box-shadow .22s;
  box-shadow: 0 0 14px rgba(255,106,0,0.18);
}
.hm-pill-text { flex: 1; }
.hm-pill-name { font-size: 12px; font-weight: 600; color: #AEAEB8; display: block; transition: color .15s; }
.hm-pill-sub  { font-size: 10px; color: #4A4A52; display: block; margin-top: 1px; transition: color .15s; }
.hm-pill-arr  { font-size: 12px; color: rgba(255,255,255,0.20); flex-shrink: 0; transition: color .15s, transform .15s; }

.hm-pill:hover {
  border-color: rgba(255,106,0,0.40);
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.55), 0 0 22px -4px rgba(255,106,0,0.18);
}
.hm-pill:hover::before { opacity: 1; }
.hm-pill:hover::after { opacity: 1; }
.hm-pill:hover .hm-pill-icon {
  background: rgba(255,106,0,0.12);
  border-color: rgba(255,106,0,0.32);
  box-shadow: 0 0 22px rgba(255,106,0,0.40);
}
.hm-pill:hover .hm-pill-name { color: #F5F5F0; }
.hm-pill:hover .hm-pill-sub  { color: #8A8A94; }
.hm-pill:hover .hm-pill-arr  { color: var(--acc); transform: translateX(3px); }

/* ── Model cloud: Premium AI Model Directory ── */
.hm-model-cloud {
  display: flex; flex-direction: column; gap: 0;
  background: rgba(7,8,10,0.88);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px; overflow: hidden;
}
/* Each group as a row section */
.hm-model-group-tag {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.046);
}
.hm-model-group-tag:last-child { border-bottom: none; }
/* Category label chip */
.hm-model-cat {
  font-size: 8.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; flex-shrink: 0; min-width: 48px;
  padding: 3px 9px; border-radius: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
/* Model badge chip */
.hm-model-item {
  font-size: 11px; color: #48484E;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.055);
  border-radius: 6px; padding: 3px 9px;
  cursor: pointer;
  transition: color .14s, background .14s, border-color .14s, box-shadow .14s;
  white-space: nowrap;
  font-family: 'Space Grotesk', sans-serif; font-weight: 500;
}
.hm-model-item:hover {
  color: #E4E4E7;
  background: rgba(255,106,0,0.09);
  border-color: rgba(255,106,0,0.25);
  box-shadow: 0 0 14px -4px rgba(255,106,0,0.22);
}

/* ── Pro JSON 모드 (이미지·영상·오디오·프롬프트·스토리보드 공용) ── */
.pro-json { margin-bottom: 8px; }
.pro-json-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--acc);
  background: rgba(255,106,0,0.10); border: 1px solid rgba(255,106,0,0.28);
  border-radius: 8px; padding: 6px 12px; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.pro-json-toggle::before { content: "{ }"; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; opacity: .85; }
.pro-json-toggle:hover { background: rgba(255,106,0,0.18); border-color: rgba(255,106,0,0.42); }
.pro-json-toggle.on { background: rgba(255,106,0,0.22); border-color: rgba(255,106,0,0.5); color: #fff; }
.pro-json-panel {
  margin-top: 8px; padding: 10px;
  border: 1px solid rgba(255,255,255,0.10); border-radius: 10px; background: rgba(255,255,255,0.02);
}
.pro-json-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pro-json-title { font-size: 12px; font-weight: 600; color: #e4e4e7; }
.pro-json-cost { font-size: 11px; font-weight: 600; color: var(--acc); }
.pro-json-gen {
  width: 100%; margin-bottom: 8px; padding: 8px;
  font-size: 12px; font-weight: 600; color: var(--acc);
  background: rgba(255,106,0,0.10); border: 1px solid rgba(255,106,0,0.28);
  border-radius: 8px; cursor: pointer; transition: background .15s, border-color .15s;
}
.pro-json-gen:hover { background: rgba(255,106,0,0.18); border-color: rgba(255,106,0,0.42); }
.pro-json-gen:disabled { opacity: .55; cursor: default; }
.pro-json-editor {
  width: 100%; box-sizing: border-box;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.55;
}
.pro-json-use {
  display: flex; align-items: center; gap: 7px; margin-top: 8px;
  font-size: 12px; color: #a1a1aa; cursor: pointer;
}
.pro-json-verlbl { display: block; font-size: 11px; color: #a1a1aa; margin-bottom: 4px; }
.pro-json-model { margin-bottom: 8px; }

/* ── 실시간 환율 inline (최대 비용 카테고리 카드 내 · 마스터 전용) ── */
.ud-hero-toprow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ud-hero-toprow .ud-hero-label { margin-bottom: 0; }
.ud-fx-inline {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: #FF8A3D; white-space: nowrap;
}
.ud-fx-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px #22c55e; flex-shrink: 0; }

/* ── 사용량 탭: 강조 재조정 + 시인성(글씨 확대·대비) ── */
[data-panel="usage"] .panel-sub { font-size: 13.5px; color: #a1a1aa; }

/* 총 예상 비용·총 호출 = 축소 (강조 낮춤) */
[data-panel="usage"] #ud-hero-usd { font-size: 30px; }
[data-panel="usage"] #ud-hero-krw { font-size: 15px; }
[data-panel="usage"] .ud-hero-label { font-size: 12px; }
[data-panel="usage"] .ud-hero-meta { font-size: 12.5px; color: #9a9aa3; }
[data-panel="usage"] #ud-kpi-calls .ud-kpi-value { font-size: 22px; }
[data-panel="usage"] #ud-kpi-top .ud-kpi-value { font-size: 18px; }
[data-panel="usage"] .ud-kpi-label { font-size: 12.5px; color: #9a9aa3; }
[data-panel="usage"] .ud-stack-legend-item { font-size: 13px; color: #b4b4bd; }

/* 카테고리 도넛 */
[data-panel="usage"] .ud-cat-name { font-size: 13px; color: #c4c4cc; }
[data-panel="usage"] .ud-cat-usd { font-size: 19px; }
[data-panel="usage"] .ud-cat-stat { font-size: 12.5px; color: #9a9aa3; }
/* 기능 8개 카드 → 데스크톱 4열(2행) 정렬 (모바일/태블릿은 기존 3·2열 유지) */
@media (min-width: 901px) { [data-panel="usage"] .ud-cat-grid { grid-template-columns: repeat(4, 1fr); } }

/* 카테고리별 비용 비교 · 모델별 상세 = 확대·강조 (글씨 키움, 열·행 정렬) */
[data-panel="usage"] .ud-hbar-section,
[data-panel="usage"] .ud-table-wrap { padding: 26px 28px; }
[data-panel="usage"] .ud-section-title { font-size: 16px; color: #e4e4e7; margin-bottom: 20px; }
[data-panel="usage"] .ud-hbar-rows { gap: 18px; }
[data-panel="usage"] .ud-hbar-label { font-size: 15px; color: #d4d4dc; }
[data-panel="usage"] .ud-hbar-track { height: 12px; }
[data-panel="usage"] .ud-hbar-val { font-size: 16.5px; }
[data-panel="usage"] .ud-table-row { font-size: 16px; padding: 15px 0; }
[data-panel="usage"] .ud-table-head { font-size: 14px; }
@media (min-width: 641px) {
  [data-panel="usage"] .ud-hbar-row { grid-template-columns: 132px 1fr 100px; }
  [data-panel="usage"] .ud-table-row { grid-template-columns: 1fr 90px 110px 132px; }
}
[data-panel="usage"] .ud-pack-price { font-size: 14px; }
[data-panel="usage"] .ud-reset-btn { font-size: 13px; }

/* ── edit 탭 편집 UI (Phase D, edit 전용 — 미니 NLE 레이아웃 · 리사이즈) ───── */
/* 편집 탭은 좌우 분할(좌:입력/우:결과) 불필요 — full-width. edit 전용 스코프(다른 탭 무손상). */
[data-panel="edit"] .studio-ctrl { width: 100%; border-right: 0; }
[data-panel="edit"] .studio-resizer { display: none; }
/* 한 화면: ctrl-body 높이 채우고 내부 스크롤 없음 → edit-stage 가 flex 로 분배(세로 스크롤 없음).
   ★ flex column 으로 만들어 #edit-root 에 높이 전달(미설정 시 percentage 높이 해결 불가 → edit-stage 가 뷰포트 끝까지 안 늘어남). */
[data-panel="edit"] .studio-ctrl-body { height: 100%; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
/* 업스케일 탭 — 컨트롤이 적어 해상도 칩+생성버튼을 컨트롤 하단에 고정(다른 탭처럼 버튼 하단 배치·2026-07-23). 모바일은 free-space 없어 자연스레 콘텐츠 흐름. */
[data-panel="upscale"] .studio-ctrl-body { display: flex; flex-direction: column; }
[data-panel="upscale"] .studio-ctrl-body .ups-model-label { margin-top: auto; }
[data-panel="edit"] #edit-root { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* edit 탭 안내(모바일·미지원): 모니터 아이콘 + PC 권장 문구 */
.edit-env-notice { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 48px 24px; min-height: 50vh; }
.edit-env-ic { width: 56px; height: 56px; fill: none; stroke: var(--text-acc); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.edit-env-title { font-size: 16px; font-weight: 600; color: var(--text-1); }
.edit-env-desc { font-size: 13px; line-height: 1.7; color: var(--text-3); max-width: 380px; }
/* EDIT 저장 관문(gate) — 미저장 원본 저장 유도. 경고 아이콘 헤더 + 카운트 칩 + 스크롤 리스트(ListTile: 선행 아이콘·파일명·후행 버튼). #f59e0b=앱 기존 미저장 배지색 재사용. */
.edit-gate { width: 100%; max-width: 720px; margin: 8px auto 0; }
.edit-gate-head { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; background: rgba(245,158,11,0.06); border: 1px solid rgba(245,158,11,0.22); border-radius: var(--r-md); }
.edit-gate-ic { flex: 0 0 auto; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: rgba(245,158,11,0.14); }
.edit-gate-ic svg { width: 19px; height: 19px; fill: none; stroke: #f59e0b; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.edit-gate-htext { font-size: 13px; line-height: 1.65; color: var(--text-2); }
.edit-gate-htext b { color: var(--text-1); font-weight: 600; }
.edit-gate-meta { display: flex; align-items: center; margin: 16px 2px 8px; }
.edit-gate-chip { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: #f59e0b; background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.24); padding: 3px 9px; border-radius: 999px; }
.edit-gate-list { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; padding: 2px; }
.edit-gate-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); transition: border-color .15s, background .15s; }
.edit-gate-row:hover { border-color: var(--border-h); background: var(--surface-3); }
.edit-gate-row-ic { flex: 0 0 auto; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(255,255,255,0.04); }
.edit-gate-row-ic svg { width: 17px; height: 17px; fill: none; stroke: var(--text-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.edit-gate-row-info { flex: 1 1 auto; min-width: 0; }
.edit-gate-row-name { font-size: 13px; color: var(--text-1); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.edit-gate-row-sub { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.edit-gate-row .dl { flex: 0 0 auto; white-space: nowrap; }
.edit-stage { height: 100%; display: flex; flex-direction: column; min-height: 0; }

/* 2×2 사분면: [위행](높이=--edit-row-toph 드래그) + B리사이저 + [아래행](나머지). 각 행 내부 좌우 = flex 분할. */
.edit-row { display: flex; min-width: 0; min-height: 0; }
.edit-row-top { height: var(--edit-row-toph, 40%); flex: 0 1 auto; min-height: 130px; }   /* 기본 위행 40%(썸네일 뷰 기준 비율 ≈ 위 315 / 아래 460) — 풀 flex-basis 0 와 함께 뷰·파일수 무관 고정. 반응형: 높이=%, 창 줄면 위 영상 먼저 수축(min 130) */
.edit-row-bot { flex: 1 1 auto; min-height: 220px; }   /* 반응형: 아래 편집툴(미디어풀·타임라인) 최소 220 보장 → 창 줄여도 안 사라짐(고정) */

/* 사분면 공통: flex 아이템, collapse 방지(min 0), 넘침 숨김. */
.edit-q { display: flex; min-width: 0; min-height: 0; overflow: hidden; }

/* 위행: 왼위 파일영상(폭=--edit-top-leftw 드래그) / 오른위 타임라인영상(나머지). 둘 다 16:9 영상 박스(채움=D3·E). */
.edit-q-srcprev { flex: 0 1 var(--edit-top-leftw, 50%); min-width: 120px; align-items: center; justify-content: center; position: relative; }   /* 단계1: source-ctrl absolute 기준 / 반응형: 좁은 폭에서 Source 축소(고정 해제) → Program 도 보임(2개 유지). A 리사이저값은 큰 화면서 유효 */
.edit-q-tlprev  { flex: 1 1 auto; min-width: 120px; align-items: center; justify-content: center; }

/* 아래행: 왼아래 미디어풀(폭=--edit-bot-leftw 드래그) / 오른아래 타임라인(나머지). */
.edit-q-pool {
  flex: 0 1 var(--edit-bot-leftw, 34%); min-width: 130px;   /* 반응형: 폭=%(창 가로 변화 자동 비례), 좁은 폭에서 미디어풀 축소(고정 해제) → 타임라인 영역 확보 */
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 10px;
}
.edit-q-tl { flex: 1 1 auto; min-width: 200px; flex-direction: column; }   /* 단계3: 도구 툴바 + 타임라인 세로 배치 (min-width: 좁은 폭에서도 타임라인 영역 확보) */

/* 미디어 풀(D3-a): 세로 = 드롭존(고정) + 임포트 목록(스크롤). 영상·오디오만 임포트(이미지 등 거부). */
.edit-q-pool { flex-direction: column; gap: 8px; }

/* 드롭존(D3-a 연결: 버튼=showOpenFilePicker / 드롭=getAsFileSystemHandle). 고정 높이 → 아래 목록 공간 확보. */
.edit-pool-drop {
  flex: 0 0 auto; min-width: 0; min-height: 92px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  border: 1.5px dashed var(--border-h); border-radius: 8px; padding: 14px; text-align: center;
}
.edit-pool-drop.dragover { border-color: var(--text-acc); background: rgba(255,106,0,0.08); }
/* 파일 있을 때(.has-items): 드롭존을 슬림 바로 compact → 아래 목록 가시성 확보. 비었을 땐 위 큰 초대 영역 유지(UX 패턴). 드롭 타깃은 유지. */
.edit-q-pool.has-items .edit-pool-drop { min-height: 0; flex-direction: row; gap: 10px; padding: 8px 10px; }
.edit-q-pool.has-items .edit-pool-drop-txt { display: none; }
.edit-q-pool.has-items .edit-pool-btn { padding: 7px 14px; }
.edit-pool-drop-txt { font-size: 12.5px; color: var(--text-3); line-height: 1.6; }
.edit-pool-btn {
  font-size: 12px; font-weight: 600; color: #fff; background: var(--text-acc);
  border: 0; border-radius: 7px; padding: 8px 16px; cursor: pointer; font-family: inherit;
}

/* 임포트 목록(카드). 넘치면 세로 스크롤. */
.edit-pool-list { flex: 1 1 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }   /* flex-basis 0: 목록 내용이 아래행 높이를 부풀리지 않게(뷰모드·파일수 무관 레이아웃 고정) → 남는 공간만 채우고 초과분 스크롤. basis auto 였을 때 리스트/썸네일 뷰 행 높이 57px 차이 버그 수정. */
.edit-pool-toolbar { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; }   /* 단계4: 검색 + 뷰 토글 */
.edit-q-pool:not(.has-items) .edit-pool-toolbar { display: none; }   /* 항목 있을 때만 */
.edit-pool-search { flex: 1 1 auto; min-width: 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 4px 8px; font-size: 12px; color: var(--text-1); }
.edit-pool-view { flex: 0 0 auto; background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 3px 8px; font-size: 12px; cursor: pointer; color: var(--text-3); }
.edit-pool-view.active { background: var(--text-acc); color: #fff; border-color: var(--text-acc); }
.edit-pool-list.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 6px; align-content: start; }
.edit-pool-list.grid .edit-pool-item { flex-direction: column; align-items: stretch; text-align: center; }
.edit-pool-list.grid .edit-pool-item-thumb { width: 100%; height: 46px; }
.edit-pool-list.grid .edit-pool-item-ico { width: 100%; }
.edit-pool-empty { font-size: 11.5px; color: var(--text-3); text-align: center; padding: 10px 6px; }
.edit-pool-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 8px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; cursor: pointer;
}
.edit-pool-item:hover { border-color: var(--border-acc); }
.edit-pool-item-ico { flex: 0 0 18px; height: 18px; line-height: 18px; text-align: center; font-size: 10px; font-weight: 700; color: #fff; border-radius: 4px; }
.edit-pool-item-ico-v { background: var(--text-acc); }
.edit-pool-item-ico-a { background: rgba(96,150,255,0.9); }
.edit-pool-item-thumb { flex: 0 0 auto; width: 40px; height: 24px; object-fit: cover; border-radius: 4px; background: #000; display: block; }
.edit-pool-item-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.edit-pool-item-name { font-size: 11px; font-weight: 600; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.edit-pool-item-dur { font-size: 9.5px; color: var(--text-2); }
.edit-pool-item-badge { flex: 0 0 auto; font-size: 9px; font-weight: 600; color: #f59e0b; background: rgba(245,158,11,0.14); border-radius: 4px; padding: 2px 5px; }
.edit-pool-item-badge-deny { color: #ef4444; background: rgba(239,68,68,0.14); }
.edit-pool-notice { font-size: 10.5px; color: #ef4444; line-height: 1.5; padding: 4px 2px 0; }
/* 풀 헤더(D3-a): 개수 + 전체 비우기 (항목 있을 때만 — :empty 숨김). */
.edit-pool-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; }
.edit-pool-head:empty { display: none; }
.edit-pool-count { font-size: 11px; font-weight: 600; color: var(--text-2); }
.edit-pool-clear { font-size: 10.5px; color: var(--text-3); background: none; border: 0; cursor: pointer; font-family: inherit; padding: 2px 4px; }
.edit-pool-clear:hover { color: #ef4444; }
/* 카드 제거 X (hover 노출 — 디스크 원본 보존, 목록 참조만 제거). */
.edit-pool-item-del { flex: 0 0 auto; width: 18px; height: 18px; line-height: 16px; text-align: center; font-size: 13px; color: var(--text-3); background: none; border: 0; border-radius: 4px; cursor: pointer; opacity: 0; font-family: inherit; }
.edit-pool-item:hover .edit-pool-item-del { opacity: 1; }
.edit-pool-item-del:hover { color: #ef4444; background: rgba(239,68,68,0.12); }

/* 영상 미리보기 박스(왼위·오른위): 영역 안에서 16:9 클램프(폭/높이 줄여도 안 잘림). 영상 들어오면 object-fit:contain(D3·E). */
.edit-preview-frame {
  max-width: 100%; max-height: 100%; aspect-ratio: 16 / 9;
  background: #000; border: 1px solid var(--border); border-radius: 10px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.edit-preview-empty { font-size: 12.5px; color: var(--text-3); text-align: center; padding: 0 16px; }
/* D3-b 왼위 미리보기: 영상=정지프레임 live video(16:9 박스 안 contain, play·controls 없음) / 오디오=A+이름+길이. */
.edit-preview-video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
/* E-멀티-2a 오른위 Program Monitor: V1·V2 합성(video 2개 겹침, z-index V2>V1) + 하단 컨트롤(.edit-q-tlprev 한정 — Source Monitor 무영향). */
.edit-q-tlprev .edit-preview-frame { position: relative; width: 100%; height: 100%; aspect-ratio: auto; }   /* video 가 absolute(겹침)라 콘텐츠 크기 0 → q 를 명시적으로 채움(붕괴 방지). video=object-fit contain 으로 16:9 유지. */
.edit-program-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
audio.edit-program-media { display: none; }       /* A1/A2 오디오 트랙 — 비표시(믹스만) */
.edit-program-v1 { z-index: 1; background: #000; }       /* 베이스 트랙 — 검은 배경 */
.edit-program-v2 { z-index: 2; background: transparent; } /* 상위 트랙 — 투명(클립 있을 때만 visible) */
.edit-program-ctrl { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: linear-gradient(transparent, rgba(0,0,0,0.55)); }
.edit-source-ctrl { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: linear-gradient(transparent, rgba(0,0,0,0.55)); }   /* 단계1: Source 컨트롤바(seek 전용) */
.edit-mon-btn { background: rgba(255,255,255,0.10); color: var(--text-1); border: 1px solid var(--border); border-radius: 5px; padding: 4px 9px; font-size: 12px; cursor: pointer; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.edit-mon-ic { width: 13px; height: 13px; display: block; fill: currentColor; stroke: none; }   /* 트랜스포트 Premiere 스타일 채움 아이콘(skip/step/play) */
.edit-mon-btn:hover { background: rgba(255,255,255,0.20); }
.edit-mon-play { background: var(--text-acc); color: #fff; border-color: var(--text-acc); font-weight: 600; }
.edit-meter { flex: 0 0 110px; height: 8px; background: rgba(255,255,255,0.12); border-radius: 4px; overflow: hidden; }   /* 3번: 사운드 레벨 미터 */
.edit-meter-fill, .edit-src-meter-fill { display: block; height: 100%; width: 0%; background: #3ddc84; }
.edit-meter-fill.high, .edit-src-meter-fill.high { background: #ffd60a; }
.edit-meter-fill.peak, .edit-src-meter-fill.peak { background: #e5484d; }
.edit-mon-tc { margin-left: auto; font-size: 11px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.edit-program-play { background: var(--text-acc); color: #fff; border: 0; border-radius: 6px; padding: 5px 14px; font-size: 12px; font-weight: 600; cursor: pointer; }
.edit-program-note { font-size: 11px; color: rgba(255,255,255,0.85); }
.edit-preview-audio { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px; text-align: center; }
.edit-preview-audio-ico { width: 34px; height: 34px; line-height: 34px; text-align: center; font-size: 15px; font-weight: 700; color: #fff; background: rgba(96,150,255,0.9); border-radius: 8px; }
.edit-preview-audio-name { font-size: 12px; font-weight: 600; color: var(--text-1); max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.edit-preview-audio-dur { font-size: 10.5px; color: var(--text-2); }
/* D3-b 선택 카드 하이라이트. */
.edit-pool-item.selected { border-color: var(--text-acc); background: rgba(255,106,0,0.10); }

/* 리사이저 — A·C(세로 막대, ew-resize: 행 내부 좌우폭) / B(가로 막대, ns-resize: 위행 높이). 더블클릭=기본 복원. */
.edit-rsz { position: relative; touch-action: none; }
.edit-rsz-a, .edit-rsz-c { flex: 0 0 12px; align-self: stretch; cursor: ew-resize; }
.edit-rsz-a::after, .edit-rsz-c::after { content: ''; position: absolute; top: 8px; bottom: 8px; left: 50%; width: 2px; transform: translateX(-50%); background: var(--border-h); border-radius: 2px; }
.edit-rsz-a:hover::after, .edit-rsz-a.dragging::after, .edit-rsz-c:hover::after, .edit-rsz-c.dragging::after { background: var(--text-acc); }
.edit-rsz-b { height: 12px; flex: 0 0 12px; cursor: ns-resize; }
.edit-rsz-b::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); background: var(--border-h); border-radius: 2px; }
.edit-rsz-b:hover::after, .edit-rsz-b.dragging::after { background: var(--text-acc); }

/* 타임라인(오른아래 사분면): edit-q-tl 채움. 4트랙이 영역보다 크면 세로 스크롤, 눈금자는 sticky 상단 고정. */
.edit-tools { flex: 0 0 auto; display: flex; gap: 4px; padding: 0 0 6px; }   /* 단계3: 도구 툴바 */
.edit-tool-btn { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); border-radius: 5px; padding: 3px 9px; font-size: 11px; cursor: pointer; }
.edit-tool-btn:hover { background: rgba(255,255,255,0.10); color: var(--text-1); }
.edit-tool-btn.active { background: var(--text-acc); color: #fff; border-color: var(--text-acc); }
.edit-tool-btn.edit-tool-ico { display: inline-flex; align-items: center; justify-content: center; padding: 5px; line-height: 0; }   /* 도구 아이콘 버튼: 정사각 + 중앙정렬(텍스트→표준 NLE SVG) */
.edit-tool-sep { flex: 0 0 1px; width: 1px; align-self: stretch; background: var(--border); margin: 2px 3px; }   /* 도구 툴바 그룹 구분자 */
.edit-tool-ic { width: 15px; height: 15px; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }   /* 사이드바 nav-ic 동일 패턴(stroke=currentColor → hover·active 색 상속) */
.edit-tl-view { margin-left: auto; display: flex; align-items: center; gap: 4px; }   /* 1번: 길이 + 줌(우측 정렬) */
.edit-len-sel { background: var(--surface-2); color: var(--text-1); border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; font-size: 11px; cursor: pointer; }
.edit-zoom-btn { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); border-radius: 5px; padding: 2px 9px; font-size: 13px; line-height: 1; cursor: pointer; }
.edit-zoom-btn:hover { background: rgba(255,255,255,0.10); color: var(--text-1); }
.edit-tl {
  flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 10px;
}
.edit-tl-inner { display: flex; gap: 8px; align-items: flex-start; }
.edit-tl-labels { flex: 0 0 80px; display: flex; flex-direction: column; gap: 4px; }
.edit-tl-lab-ruler { flex: 0 0 20px; height: 20px; position: sticky; top: 0; z-index: 6; background: var(--surface-1); }
.edit-tl-lab {
  flex: 0 0 46px; height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: 11px; font-weight: 600; color: var(--text-2); background: var(--surface-2); border-radius: 6px;
}
.edit-trk-btns { display: flex; gap: 3px; }   /* 단계2: 트랙 헤더 컨트롤 */
.edit-trk-btn { background: rgba(255,255,255,0.08); color: var(--text-3); border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; font-size: 9px; line-height: 1.4; cursor: pointer; }
.edit-trk-btn:hover { background: rgba(255,255,255,0.18); }
.edit-trk-btn.active { background: var(--text-acc); color: #fff; border-color: var(--text-acc); }
.edit-trk-btn[data-tk="mute"].active { background: #e5484d; border-color: #e5484d; color: #fff; }
.edit-trk-btn[data-tk="hide"].active { background: rgba(255,255,255,0.08); border-color: var(--border); color: var(--text-3); opacity: 0.4; }
.edit-trk-btn[data-tk="target"].active { background: #3ddc84; border-color: #3ddc84; color: #042; }   /* 타깃 트랙(Insert/Overwrite 대상) */
.edit-tl-lane.locked { opacity: 0.5; }
.edit-tl-lane.locked .edit-clip { pointer-events: none; }
.edit-trk-vol, .edit-trk-opacity { -webkit-appearance: none; appearance: none; width: 64px; height: 4px; background: var(--border); border-radius: 2px; cursor: pointer; margin-top: 1px; }   /* A1/A2 볼륨 · V1/V2 불투명도 */
.edit-trk-vol::-webkit-slider-thumb, .edit-trk-opacity::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 11px; height: 11px; border-radius: 50%; background: var(--text-acc); cursor: pointer; }
.edit-tl-scroll {
  flex: 1 1 auto; min-width: 0; overflow-x: auto; position: relative;
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
}
.edit-marquee { position: absolute; z-index: 8; border: 1px solid var(--text-acc); background: rgba(255,106,0,0.12); pointer-events: none; }   /* 마퀴 박스 선택 */
.edit-tl-ruler { flex: 0 0 20px; height: 20px; position: sticky; top: 0; z-index: 6; background: var(--surface-1); border-bottom: 1px solid var(--border); cursor: pointer; }   /* A-2 스크러빙 드래그 핸들 */
.edit-tl-lane { flex: 0 0 46px; height: 46px; position: relative; background: var(--surface-2); border-radius: 6px; }
.edit-tl-playhead { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--text-acc); z-index: 5; pointer-events: auto; cursor: ew-resize; }
.edit-tl-playhead::before { content: ''; position: absolute; top: 0; bottom: 0; left: -3px; right: -3px; }   /* 2px 라인 히트 확장(±3px) — 라인 어느 높이에서든 잡고 드래그 */
.edit-tl-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); }
.edit-tl-tick-label { position: absolute; top: 3px; left: 4px; font-size: 9px; color: var(--text-3); white-space: nowrap; }
.edit-tl-marker { position: absolute; top: 0; height: 14px; width: 9px; margin-left: -4px; z-index: 7; cursor: pointer; clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%); }   /* 마커 핀(아래 뾰족) — background=marker.color inline */
.edit-tl-marker:hover { filter: brightness(1.4); }
/* in/out 마킹(표준 NLE) — 룰러 위 구간 음영 + in/out 핸들 */
.edit-tl-inout-band { position: absolute; top: 0; height: 20px; background: rgba(255, 214, 10, 0.20); z-index: 4; pointer-events: none; }
.edit-tl-in, .edit-tl-out { position: absolute; top: 0; height: 18px; width: 7px; z-index: 7; cursor: pointer; background: #ffd60a; }
.edit-tl-in { margin-left: 0; border-left: 2px solid #ff9f0a; }       /* [ 구간 시작 */
.edit-tl-out { margin-left: -7px; border-right: 2px solid #ff9f0a; }  /* ] 구간 끝 */
.edit-tl-in:hover, .edit-tl-out:hover { filter: brightness(1.3); }
.edit-marker-dialog-ov { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; }
.edit-marker-dialog { width: 320px; max-width: 90vw; background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.4); }
.edit-marker-dialog .emd-title { font-size: 13px; font-weight: 600; color: var(--text-1); margin-bottom: 12px; }
.edit-marker-dialog .emd-tc { font-weight: 400; color: var(--text-3); font-size: 11px; }
.edit-marker-dialog .emd-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.edit-marker-dialog .emd-row > label { flex: 0 0 40px; font-size: 12px; color: var(--text-2); }
.edit-marker-dialog .emd-name { flex: 1; padding: 6px 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; color: var(--text-1); font-size: 13px; }
.edit-marker-dialog .emd-colors { display: flex; gap: 6px; flex-wrap: wrap; }
.edit-marker-dialog .emd-sw { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.edit-marker-dialog .emd-sw.sel { border-color: var(--text-1); box-shadow: 0 0 0 2px var(--surface-1) inset; }
.edit-marker-dialog .emd-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.edit-marker-dialog .emd-spacer { flex: 1; }
.edit-marker-dialog .emd-actions button { padding: 6px 14px; border-radius: 6px; font-size: 12px; cursor: pointer; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-1); }
.edit-marker-dialog .emd-save { background: var(--text-acc); border-color: var(--text-acc); color: #fff; }
.edit-marker-dialog .emd-del { background: transparent; border-color: #e5484d; color: #e5484d; }

/* 클립 막대(읽기 전용 — 드래그/클릭은 D3) */
.edit-clip {
  position: absolute; top: 5px; bottom: 5px; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 4px 6px; border-radius: 5px; overflow: hidden;
  background: rgba(255,106,0,0.16); border: 1px solid var(--border-acc);
}
.edit-clip-audio { background: rgba(96,150,255,0.15); border-color: rgba(96,150,255,0.34); }
.edit-clip-error { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.42); }
.edit-clip-name {
  font-size: 10.5px; font-weight: 600; color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.edit-clip-dur { font-size: 9.5px; color: var(--text-2); }
.edit-clip-error .edit-clip-dur { color: #ef4444; }
/* c-2 클립 이동: 막대 본체 드래그(grab). 드래그 중 강조. 에러 막대는 비드래그. */
.edit-clip { cursor: grab; user-select: none; touch-action: none; }
.edit-clip.disabled { opacity: 0.45; filter: grayscale(0.6); }   /* 비활성 클립(재생/합성 제외) 디밍 */
.edit-clip.dragging { cursor: grabbing; opacity: 0.88; z-index: 10; }
.edit-clip.selected { outline: 2px solid var(--text-acc); outline-offset: -1px; z-index: 6; }   /* B-0 선택 하이라이트 */
.edit-clip.trimming { z-index: 10; }
.edit-clip-error { cursor: default; }
/* c-3 트림 핸들(좌/우 가장자리, ew-resize). hover 시 노출. */
.edit-clip-trim { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; z-index: 3; background: transparent; }
.edit-clip-trim-l { left: 0; } .edit-clip-trim-r { right: 0; }
.edit-clip:hover .edit-clip-trim, .edit-clip.trimming .edit-clip-trim { background: rgba(255,255,255,0.28); }
.edit-clip-error .edit-clip-trim { display: none; }
/* c-1a 드래그 추가: 레인 드롭 하이라이트 + 거부 안내(타임라인 사분면 위 오버레이). */
.edit-q-tl { position: relative; }
.edit-tl-lane.dragover { background: rgba(255,106,0,0.14); }
.edit-tl-notice { position: absolute; left: 12px; bottom: 12px; z-index: 8; font-size: 11px; color: #ef4444; background: var(--surface-1); border: 1px solid rgba(239,68,68,0.4); border-radius: 6px; padding: 6px 10px; }

/* 메인 입력창 격려 문구: placeholder(예시)는 그대로, 문구만 입력창 안 하단에 오버레이로 더 흐리게.
   글자를 입력하면(:placeholder-shown 해제) 자동으로 숨김. */
.ta-hwrap { position: relative; }
.ta-hwrap > .ta-hint { position: absolute; left: 14px; right: 14px; bottom: 11px; font-size: 11px; line-height: 1.4; color: rgba(156,163,175,0.55); pointer-events: none; user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-hwrap > textarea:not(:placeholder-shown) ~ .ta-hint { display: none; }
/* 모바일: 좁은 화면에선 placeholder 줄 수가 늘어 하단 안내문구(.ta-hint)와 겹침 → 숨김(데스크탑은 유지) */
@media (max-width: 640px) { .ta-hwrap > .ta-hint { display: none; } }

/* ── 관리자 총괄 탭 (v162 — 마스터 전용, 기존 ud- 토큰 준수 / 시인성 강화) ───────────────── */
.adm-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
@media (max-width: 760px) { .adm-cards { grid-template-columns: repeat(2, 1fr); } }
.adm-card {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, rgba(34,35,43,0.72), rgba(18,19,24,0.72));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px; padding: 17px 19px;
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 28px -16px rgba(0,0,0,0.7);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.adm-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, #FF6A00, rgba(255,106,0,0) 72%); opacity: .85; }
.adm-card:hover { transform: translateY(-2px); border-color: rgba(255,106,0,0.32); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 16px 36px -16px rgba(0,0,0,0.78); }
.adm-card-k { font-size: 13px; color: #c4c4cc; letter-spacing: .02em; font-weight: 500; }
.adm-card-v { font-size: 31px; font-weight: 700; color: #ffffff; margin-top: 8px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.adm-card-s { font-size: 12px; color: #9a9aa3; margin-top: 5px; }
.adm-toolbar { display: flex; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.adm-input {
  background: rgba(18,19,24,0.95); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px; color: #f4f4f5; font-size: 14px; padding: 8px 12px; width: 240px; outline: none;
}
.adm-input::placeholder { color: #8a8a93; }
.adm-input:focus { border-color: #FF6A00; }
.adm-muted { font-size: 13px; color: #a8a8b0; }
/* ── 실시간 접속자 (관리자 접속탭) ── */
.adm-live-panel { margin-top: 12px; margin-bottom: 12px; }
.adm-live-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; flex-wrap: wrap; }
.adm-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex: none; animation: admLivePulse 1.9s ease-out infinite; }
@keyframes admLivePulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); } 70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
.adm-live-badge { display: inline-flex; align-items: baseline; gap: 3px; padding: 2px 10px; border-radius: 999px; background: rgba(255,106,0,0.12); border: 1px solid rgba(255,106,0,0.28); color: #FF6A00; font-size: 12px; font-weight: 600; font-family: var(--font-body); font-variant-numeric: tabular-nums; }
.adm-live-badge b { font-size: 13px; font-weight: 700; }
.adm-live-note { margin-left: auto; font-weight: 400; }
.adm-live-list { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow-y: auto; }
.adm-live-empty { color: #71717a; font-size: 13px; padding: 16px 4px; text-align: center; }
.adm-live-row { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border-radius: 11px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); transition: border-color .16s, background .16s; }
.adm-live-row:hover { border-color: rgba(255,106,0,0.24); background: rgba(255,255,255,0.045); }
.adm-live-av { width: 30px; height: 30px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #FF6A00, #ff8c3a); font-family: var(--font-body); }
.adm-live-av.guest { background: rgba(255,255,255,0.1); color: #a1a1aa; }
.adm-live-main { flex: 1; min-width: 0; }
.adm-live-who { font-size: 13px; color: #e4e4e7; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-live-meta { font-size: 11px; color: #71717a; margin-top: 1px; font-variant-numeric: tabular-nums; }
.adm-live-tab { flex: none; padding: 3px 10px; border-radius: 7px; background: rgba(255,106,0,0.1); color: #FF6A00; font-size: 11px; font-weight: 600; font-family: var(--font-body); }
.adm-live-ago { flex: none; font-size: 11px; color: #a1a1aa; min-width: 46px; text-align: right; font-variant-numeric: tabular-nums; }
.adm-table-wrap { margin-top: 12px; border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; overflow: auto; max-height: 540px; background: rgba(18,19,24,0.7); box-shadow: 0 10px 28px -18px rgba(0,0,0,0.7); }
.adm-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.adm-table th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; padding: 11px 14px; color: #c4c4cc; font-weight: 600; font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,0.14); background: rgba(26,27,33,0.97); white-space: nowrap;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); letter-spacing: .01em;
}
.adm-table td { padding: 11px 14px; color: #f4f4f5; border-bottom: 1px solid rgba(255,255,255,0.06); white-space: nowrap; font-variant-numeric: tabular-nums; }
.adm-table tbody tr { transition: background .12s ease; }
.adm-table tbody tr:nth-child(even) td { background: rgba(255,255,255,0.018); }
.adm-table tbody tr:hover td { background: rgba(255,106,0,0.07); }
.adm-table tr:last-child td { border-bottom: none; }
.adm-badge { font-size: 11px; color: #FF6A00; border: 1px solid rgba(255,106,0,0.55); border-radius: 4px; padding: 1px 5px; vertical-align: middle; font-weight: 600; }
.adm-pager { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.adm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.adm-chip { font-size: 13px; color: #f4f4f5; background: rgba(18,19,24,0.95); border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; padding: 5px 12px; }
.adm-chip b { color: #FF6A00; font-weight: 700; }
.adm-trend { display: flex; align-items: flex-end; gap: 5px; margin-top: 10px; min-height: 72px; overflow-x: auto; padding-bottom: 2px; }
.adm-bar-col { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; }
.adm-bar { width: 16px; background: linear-gradient(180deg, #FF8A33, #cc5500); border-radius: 4px 4px 0 0; min-height: 3px; transition: height .5s cubic-bezier(.4,0,.2,1), filter .15s ease; }
.adm-bar-col:hover .adm-bar { filter: brightness(1.18); }
.adm-bar-col span { font-size: 11px; color: #9a9aa3; }

/* ── 관리자 접속 모드 시각화 (v163 — 도넛 conic-gradient·가로막대, 라이브러리 0) ── */
.adm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
@media (max-width: 900px) { .adm-grid2 { grid-template-columns: 1fr; } }
.adm-panel {
  background: #121318;
  border: 1px solid rgba(255,255,255,0.14);
  border-top-color: rgba(255,255,255,0.2);
  border-radius: 12px; padding: 16px 18px;
}
.adm-donut-wrap { display: flex; align-items: center; gap: 22px; margin-top: 10px; flex-wrap: wrap; }
.adm-donut { width: 150px; height: 150px; position: relative; flex: 0 0 auto; }
.adm-donut svg { width: 100%; height: 100%; display: block; }
.adm-donut-bg { fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 4.3; }
.adm-donut-seg { fill: none; stroke-width: 4.3; stroke-linecap: butt; transform-origin: center; transition: stroke-width .18s ease; animation: adm-donut-in .65s cubic-bezier(.4,0,.2,1) both; }
.adm-donut-seg:hover { stroke-width: 5.6; }
.adm-donut b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 25px; font-weight: 700; color: #ffffff; font-variant-numeric: tabular-nums; pointer-events: none; }
@keyframes adm-donut-in { from { stroke-dasharray: 0 100; } }
.adm-legend { display: flex; flex-direction: column; gap: 7px; min-width: 180px; flex: 1; }
.adm-leg-row { display: grid; grid-template-columns: 12px 1fr auto 44px; align-items: center; gap: 8px; font-size: 13px; }
.adm-leg-dot { width: 10px; height: 10px; border-radius: 3px; }
.adm-leg-lb { color: #f4f4f5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-leg-row b { color: #ffffff; font-variant-numeric: tabular-nums; }
.adm-leg-pct { color: #9a9aa3; text-align: right; font-variant-numeric: tabular-nums; }
.adm-hbars { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.adm-hbar-row { display: grid; grid-template-columns: 110px 1fr 40px 44px; align-items: center; gap: 10px; font-size: 13px; }
.adm-hbar-lb { color: #f4f4f5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-hbar-track { height: 14px; background: rgba(255,255,255,0.07); border-radius: 7px; overflow: hidden; }
.adm-hbar-fill { display: block; height: 100%; background: linear-gradient(90deg, #FF6A00, #FF9A4D); border-radius: 7px; transition: width .6s cubic-bezier(.4,0,.2,1), filter .15s ease; }
.adm-hbar-row:hover .adm-hbar-fill { filter: brightness(1.15); }
.adm-hbar-v { color: #ffffff; text-align: right; font-variant-numeric: tabular-nums; }
.adm-hbar-pct { color: #9a9aa3; text-align: right; font-variant-numeric: tabular-nums; }
.adm-bar-col b { font-size: 11px; color: #ffffff; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .adm-card, .adm-hbar-fill, .adm-bar, .adm-donut-seg, .adm-table tbody tr { transition: none !important; animation: none !important; }
}

/* 관리자 사용량 — 계정별 테이블(회원 목록 adm-table 재사용) + 펼침 행(클릭 시 모델별 상세 인라인) */
.adm-usage-row { cursor: pointer; }
.adm-usage-row .adm-usage-chev { display: inline-block; width: 14px; color: #71717a; font-size: 11px; }
.adm-usage-row .adm-usage-chev::before { content: '\25B8'; }
.adm-usage-row[aria-expanded="true"] .adm-usage-chev::before { content: '\25BE'; }
.adm-usage-row[aria-expanded="true"] { background: rgba(255,255,255,0.03); }
.adm-usage-num { text-align: right; font-variant-numeric: tabular-nums; }
.adm-usage-cost { color: #F5821F; font-weight: 600; }
.adm-usage-detail-row > td { padding: 0 !important; background: #16161a; }
.adm-usage-detail { padding: 6px 16px 12px 40px; }

/* ── 관리자 탭 모바일 전용 (≤767px — 데스크톱 무영향·[data-panel="admin"] 스코프 한정) ──
   서브탭 11종=가로 스크롤 칩(scroll-snap) / 전 테이블=카드 스택(td::before=attr(data-label)·app.js _admStampLabels가 thead에서 자동 부여) → 좌우 스크롤 제거 */
@media (max-width: 767px) {
  /* 서브탭 11종 = wrap 칩(3열·전체 한눈 노출 — 가로 스크롤 없음. Material 칩 wrap 패턴·audio/hstudio 탭과 동일 계열) */
  [data-panel="admin"] .img-mode-tabs { flex-wrap: wrap; }
  [data-panel="admin"] .img-mode-btn { flex: 1 1 calc(33.33% - 6px); padding: 8px 4px; font-size: 12px; white-space: nowrap; }
  [data-panel="admin"] .adm-card { padding: 13px 14px; }
  [data-panel="admin"] .adm-card-v { font-size: 24px; }
  /* 테이블 → 카드 스택: 래퍼 내부스크롤 해제(중첩 스크롤 방지) + 행=카드 + 셀=라벨/값 2열 그리드 */
  [data-panel="admin"] .adm-table-wrap { overflow: visible; max-height: none; border: none; background: transparent; box-shadow: none; }
  [data-panel="admin"] .adm-table { display: block; }
  [data-panel="admin"] .adm-table thead { display: none; }
  [data-panel="admin"] .adm-table tbody { display: block; }
  [data-panel="admin"] .adm-table tbody tr { display: block; margin-bottom: 10px; border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; background: rgba(18,19,24,0.7); overflow: hidden; }
  [data-panel="admin"] .adm-table tbody td { display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: center; padding: 8px 12px; white-space: normal; word-break: break-word; border-bottom: 1px solid rgba(255,255,255,0.05); }
  [data-panel="admin"] .adm-table tbody td::before { content: attr(data-label); color: #9a9aa3; font-size: 12px; font-weight: 600; }
  [data-panel="admin"] .adm-table tbody td:last-child { border-bottom: none; }
  /* colspan 셀(로딩/빈 상태)·라벨 미부여 셀 = 라벨 칸 없이 전체 폭 */
  [data-panel="admin"] .adm-table tbody td[colspan], [data-panel="admin"] .adm-table tbody td:not([data-label]) { display: block; }
  [data-panel="admin"] .adm-table tbody td[colspan]::before, [data-panel="admin"] .adm-table tbody td:not([data-label])::before { content: none; }
  /* zebra·hover 배경=카드 배경과 충돌 → 해제 */
  [data-panel="admin"] .adm-table tbody tr:nth-child(even) td, [data-panel="admin"] .adm-table tbody tr:hover td { background: transparent; }
  /* [사용량] 펼침 상세 행 — 카드 모드에서 전체 폭. hidden 행은 author display가 UA [hidden]을 덮으므로 명시 차단 */
  [data-panel="admin"] .adm-table tbody tr[hidden] { display: none; }
  [data-panel="admin"] .adm-usage-detail-row > td { display: block; }
  [data-panel="admin"] .adm-usage-detail-row > td::before { content: none; }
  [data-panel="admin"] .adm-usage-detail { padding: 8px 12px 12px; }
  /* 2줄 요약 리스트(Material list 2-line 패턴) — data-cell(p/m/x)·data-sum·data-more는 _admStampLabels(_ADM_CARD_CFG)가 부여.
     미설정 테이블(동적 사용량 등)=위 라벨/값 카드 유지. 규칙 순서 의존: [data-open] 규칙이 뒤에 와야 요약 규칙을 덮음(동일 특이도). */
  [data-panel="admin"] .adm-table tbody tr[data-sum] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 12px; padding: 10px 12px; }
  [data-panel="admin"] .adm-table tbody tr[data-sum][data-more] { cursor: pointer; }
  [data-panel="admin"] .adm-table tbody tr[data-sum] > td { border-bottom: none; padding: 0; }
  [data-panel="admin"] .adm-table tbody tr[data-sum] > td[data-cell="p"] { display: block; flex: 1 1 100%; font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
  [data-panel="admin"] .adm-table tbody tr[data-sum] > td[data-cell="p"]::before { content: none; }
  [data-panel="admin"] .adm-table tbody tr[data-sum] > td[data-cell="m"] { display: inline-flex; align-items: baseline; gap: 5px; font-size: 12.5px; color: #d4d4d8; }
  [data-panel="admin"] .adm-table tbody tr[data-sum] > td[data-cell="m"]::before { content: attr(data-label); color: #71717a; font-size: 11px; font-weight: 500; }
  [data-panel="admin"] .adm-table tbody tr[data-sum] > td[data-cell="x"] { display: none; }
  [data-panel="admin"] .adm-table tbody tr[data-sum][data-more]::after { content: '\25BE'; margin-left: auto; color: #71717a; font-size: 12px; align-self: center; }
  /* 펼침 = 전체 필드 라벨/값 그리드(정보 손실 0) */
  [data-panel="admin"] .adm-table tbody tr[data-sum][data-open] > td { display: grid; grid-template-columns: 96px 1fr; gap: 10px; flex: 1 1 100%; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.05); white-space: normal; word-break: break-word; }
  [data-panel="admin"] .adm-table tbody tr[data-sum][data-open] > td::before { content: attr(data-label); color: #9a9aa3; font-size: 12px; font-weight: 600; }
  [data-panel="admin"] .adm-table tbody tr[data-sum][data-open] > td:last-child { border-bottom: none; }
  [data-panel="admin"] .adm-table tbody tr[data-sum][data-open]::after { content: '\25B4'; }
  /* 툴바 = 2열 그리드(폭 통일) — 실측 결함 보정: (1)인라인 width:auto 셀렉트=내용 폭만큼만 차지=우측 랙지드 (2)인라인 고정폭(120~220px) 입력이 시트 width:100%를 이김 (3)flex min-width:auto로 긴 옵션 셀렉트가 화면 초과(392px>390 실측).
     !important=인라인 스타일 격파 의도 · min-width:0=내용 폭 초과 차단 · 검색계 입력/안내문=풀행. display:none 컨트롤(custom 날짜)은 그리드 미참여. */
  [data-panel="admin"] .adm-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: center; }
  [data-panel="admin"] .adm-toolbar .adm-input, [data-panel="admin"] .adm-toolbar .sel, [data-panel="admin"] .adm-toolbar .dl { width: 100% !important; min-width: 0; max-width: 100%; box-sizing: border-box; }
  [data-panel="admin"] .adm-toolbar input[type="text"], [data-panel="admin"] .adm-toolbar input[type="email"], [data-panel="admin"] .adm-toolbar .adm-muted { grid-column: 1 / -1; }
  [data-panel="admin"] .adm-pager { justify-content: center; }
  [data-panel="admin"] .adm-pager .dl { padding: 10px 18px; }
  /* 차트류: 좁은 폭 그리드 축소 */
  [data-panel="admin"] .adm-hbar-row { grid-template-columns: 84px 1fr 36px 40px; gap: 6px; }
  [data-panel="admin"] .adm-donut-wrap { justify-content: center; }
}

/* 파일 탭 Drive — 라이브러리식 썸네일 그리드 (auto-fill, 반응형: 좁으면 자동 1열) */
.gd-grid { padding: 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; align-content: start; }
.gd-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.gd-thumb { aspect-ratio: 16 / 10; background: rgba(255,255,255,0.04); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.gd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gd-thumb .gd-icon { font-size: 11px; color: #9a9aa3; padding: 10px; text-align: center; word-break: break-all; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.gd-name { padding: 10px 12px 4px; font-size: 13px; color: #fafafa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gd-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 12px; }
.gd-actions button, .gd-actions a { font-size: 11px; padding: 5px 8px; border-radius: 7px; background: rgba(255,255,255,0.06); color: #e5e5e5; border: 1px solid var(--border); cursor: pointer; text-decoration: none; }
.gd-actions [data-gd-del] { color: #ff8a8a; }
.gd-empty { height: 100%; display: flex; align-items: center; justify-content: center; color: #71717a; font-size: 13px; padding: 40px; text-align: center; }

/* ── 마이페이지 (usage 탭 확장 — 내 계정·비밀번호·마케팅·결제 내역) ───────────── */
.acc-info-card { padding: 16px 20px; display: flex; flex-direction: column; gap: 11px; }
.acc-info-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.acc-info-k { font-size: 12px; color: #71717a; flex-shrink: 0; }
.acc-info-v { font-size: 13px; color: #fafafa; font-weight: 500; word-break: break-all; text-align: right; }
.acc-info-sub { color: #a1a1aa; font-weight: 400; }
.acc-toggle-card { padding: 15px 20px; margin-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.acc-toggle-title { font-size: 13px; color: #fafafa; font-weight: 500; }
.acc-toggle-desc { font-size: 11px; color: #71717a; margin-top: 3px; line-height: 1.5; }
.acc-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.acc-switch input { opacity: 0; width: 0; height: 0; }
.acc-slider { position: absolute; cursor: pointer; inset: 0; background: #3f3f46; border-radius: 24px; transition: background .2s; }
.acc-slider::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fafafa; border-radius: 50%; transition: transform .2s; }
.acc-switch input:checked + .acc-slider { background: #FF6A00; }
.acc-switch input:checked + .acc-slider::before { transform: translateX(18px); }
.acc-form-card { padding: 16px 20px; margin-top: 12px; }
.acc-form-title { font-size: 13px; color: #fafafa; font-weight: 500; margin-bottom: 12px; }
.acc-input { width: 100%; box-sizing: border-box; background: #1c1c1e; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 10px 12px; font-size: 13px; color: #fafafa; margin-bottom: 8px; font-family: inherit; }
.acc-input:focus { outline: none; border-color: #FF6A00; }
.acc-input::placeholder { color: #52525b; }
.acc-form-msg { font-size: 11px; margin-bottom: 8px; line-height: 1.5; }
.acc-btn { background: linear-gradient(135deg,#FF6A00,#FF9A1F); color: #fff; font-size: 13px; font-weight: 600; border: 0; border-radius: 8px; padding: 10px 18px; cursor: pointer; font-family: inherit; }
.acc-btn:disabled { opacity: .5; cursor: not-allowed; }
.acc-note-card { padding: 14px 20px; margin-top: 12px; font-size: 11px; color: #71717a; line-height: 1.6; }
.ud-pay-row { display: grid; grid-template-columns: 1fr 110px 110px 80px; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 13px; }
.ud-pay-row:last-child { border-bottom: none; }
.ud-pay-row span:first-child { color: #e4e4e7; font-weight: 500; }
.ud-pay-row span:not(:first-child) { text-align: right; color: var(--text-3); }
.ud-pay-head { color: #71717a; font-size: 11px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.acc-pay-note { font-size: 10px; color: #52525b; margin-top: 10px; line-height: 1.5; }
.acc-pay-note a { color: #FF6A00; text-decoration: underline; }
[data-panel="usage"] .ud-pay-row { font-size: 15px; padding: 14px 0; }
@media (max-width: 600px) {
  .ud-pay-row { grid-template-columns: 1fr auto; }
  .ud-pay-row span:nth-child(2), .ud-pay-row span:nth-child(3) { display: none; }
}
.acc-invite-card { padding: 15px 20px; margin-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.acc-invite-actions { display: flex; gap: 8px; flex-shrink: 0; }
.acc-btn-ghost { background: rgba(255,255,255,0.06); color: #e4e4e7; border: 1px solid rgba(255,255,255,0.1); }
.acc-pay-empty { font-size: 13px; color: #71717a; text-align: center; padding: 24px 0; }
#nav-account-btn:hover { background: rgba(255,255,255,0.08); }

/* My Account 패널 시인성 강화 (account 전용 스코프 — 다른 패널 영향 없음) */
[data-panel="account"] .ud-page { max-width: 680px; }   /* 계정설정 단일 컬럼 — 좌우로 길게 늘어나지 않게 폭 제한·중앙 정렬 */
[data-panel="account"] .panel-title { color: #fafafa; }
[data-panel="account"] .ud-section-title { font-size: 16px; color: #fafafa; font-weight: 600; margin-bottom: 14px; }
[data-panel="account"] .ud-glass { background: rgba(28,29,33,0.96); border-color: rgba(255,255,255,0.16); }
[data-panel="account"] .acc-info-card { padding: 18px 22px; gap: 14px; }
[data-panel="account"] .acc-info-k { color: #a1a1aa; font-size: 13px; }
[data-panel="account"] .acc-info-v { font-size: 14px; }
[data-panel="account"] .acc-info-sub { color: #d4d4d8; }
[data-panel="account"] .acc-toggle-title, [data-panel="account"] .acc-form-title { font-size: 14px; color: #fafafa; }
[data-panel="account"] .acc-toggle-desc { color: #a1a1aa; }
[data-panel="account"] .acc-input { background: #232428; font-size: 14px; }
[data-panel="account"] .acc-pay-empty { color: #a1a1aa; }
[data-panel="account"] .ud-pay-row { font-size: 14px; }
[data-panel="account"] .ud-pay-head { color: #a1a1aa; font-size: 12px; }

/* 2026 트렌드 — 프로필 헤더 + 차분한 마이크로 인터랙션 + color-mix 브랜드 색 (검증된 신기술만) */
.acc-profile-head { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.acc-avatar {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: #fff; text-transform: uppercase;
  background: linear-gradient(135deg, #FF6A00, #FF9A1F);
  box-shadow: 0 4px 14px color-mix(in srgb, #FF6A00 35%, transparent);   /* color-mix: 브랜드색 글로우(프로덕션 레디) */
}
.acc-profile-name { font-size: 22px; font-weight: 700; color: #fafafa; margin: 0; line-height: 1.2; }
.acc-profile-email { font-size: 13px; color: #a1a1aa; margin: 4px 0 0; word-break: break-all; }
/* 카드 깊이감(subtle depth) + 차분한 hover (calm micro-interaction, 과한 장식 X) */
[data-panel="account"] .ud-glass { box-shadow: 0 1px 3px rgba(0,0,0,0.28); transition: border-color .2s ease, box-shadow .2s ease; }
[data-panel="account"] .ud-glass:hover { border-color: color-mix(in srgb, #FF6A00 32%, rgba(255,255,255,0.16)); box-shadow: 0 4px 16px rgba(0,0,0,0.32); }
/* 내 계정 정보 + 비밀번호 변경 = 좌우 2열(반반). 모바일은 1열 */
.acc-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }   /* 두 카드 동일 높이 */
.acc-two-col > .ud-glass { height: 100%; box-sizing: border-box; margin: 0; }   /* 셀 높이 채움 + margin 제거(비번 카드 margin-top:12px 이 top 을 어긋나게 하던 원인 제거) */
@media (max-width: 560px) { .acc-two-col { grid-template-columns: 1fr; } }
/* 비밀번호 변경 카드 — 내 계정 카드보다 작게 압축 → stretch 로 내 계정(작은거) 높이에 동일 정렬 */
[data-panel="account"] .acc-form-card { padding: 14px 16px; }
[data-panel="account"] .acc-form-title { margin-bottom: 8px; font-size: 12px; }
[data-panel="account"] .acc-form-card .acc-input { padding: 6px 10px; margin-bottom: 5px; font-size: 12px; }
[data-panel="account"] #acc-pw-btn { padding: 6px 14px; font-size: 12px; margin-top: 2px; }

/* ── H STUDIO · Video Effects 갤러리 (카테고리 탭 + 썸네일 움직임 미리보기) ───── */
/* 좌측 선택 표시 */
.hs-fx-preview { margin: 12px auto 0; max-width: 116px; border-radius: 10px; overflow: hidden; }
.hs-fx-preview video { width: 100%; display: block; border-radius: 10px; background: #000; aspect-ratio: 9 / 16; object-fit: cover; }
.hs-fx-selected {
  margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  background: rgba(255,106,0,0.08); border: 1px solid rgba(255,106,0,0.3);
  font-size: 12.5px; color: var(--text-2); line-height: 1.5;
}
.hs-fx-selected.on { color: #fafafa; font-weight: 600; }
/* 카테고리 칩 */
.hs-fx-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.hs-fx-cats button {
  padding: 6px 12px; border-radius: 999px; font-size: 12px; cursor: pointer;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--text-2);
  white-space: nowrap; transition: background .15s, color .15s, border-color .15s;
}
.hs-fx-cats button:hover { background: rgba(255,255,255,0.08); color: #fafafa; }
.hs-fx-cats button.active { background: #FF6A00; border-color: #FF6A00; color: #fff; font-weight: 600; }
/* 썸네일 그리드 */
.hs-fx-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 10px; align-content: start;
}
.hs-fx-more { text-align: center; font-size: 13px; font-weight: 700; color: #9a9a9a; padding: 12px 0 2px; }  /* 모바일 2줄 표시 후 나머지 개수(숫자) — PC에선 미표시(app.js 토글) */
.hs-fx-thumb {
  position: relative; border-radius: 10px; overflow: hidden; cursor: pointer;
  aspect-ratio: 9 / 16; background: rgba(255,255,255,0.04);
  border: 2px solid transparent; transition: border-color .15s, transform .12s;
}
.hs-fx-thumb:hover { transform: translateY(-2px); }
.hs-fx-thumb.selected { border-color: #FF6A00; }
.hs-fx-thumb img, .hs-fx-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hs-fx-thumb video { position: absolute; inset: 0; opacity: 0; transition: opacity .2s; }
.hs-fx-thumb.playing video { opacity: 1; }
.hs-fx-thumb .hs-fx-label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 6px;
  font-size: 11px; color: #fff; line-height: 1.3;
  background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
}
.hs-fx-thumb .hs-fx-label em { display: block; font-style: normal; font-size: 9.5px; opacity: .82; margin-top: 1px; }
.hs-fx-thumb .hs-fx-cr {
  position: absolute; top: 6px; right: 6px; padding: 3px 7px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 700; color: #fff; background: rgba(0,0,0,0.72);
}
.hs-fx-thumb .hs-fx-cr .coin-icon { width: 11px; height: 11px; }
.hs-fx-thumb .hs-fx-dual {
  position: absolute; top: 6px; left: 6px; padding: 2px 6px; border-radius: 6px;
  font-size: 9.5px; color: #fff; background: rgba(0,0,0,0.62);
}
/* Avatar/Motion 공식 데모(YouTube) — 시네마틱 쇼케이스(Aurora 글로우 + 그라데이션 타이틀 + glass 스텝) */
.hs-demo { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; min-height: calc(100vh - 200px); padding: 30px 16px; }
.hs-demo::before { content: ''; position: absolute; top: 6%; left: 50%; transform: translateX(-50%); width: 72%; height: 46%; background: radial-gradient(ellipse at center, rgba(255,106,0,0.2), transparent 70%); filter: blur(64px); pointer-events: none; z-index: 0; }
.hs-demo > * { position: relative; z-index: 1; }
.hs-demo-head { text-align: center; }
.hs-demo-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 999px; font-size: 11px; font-weight: 600; color: #FF6A00; background: rgba(255,106,0,0.1); border: 1px solid rgba(255,106,0,0.32); }
.hs-demo-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #FF6A00; box-shadow: 0 0 6px #FF6A00; }
.hs-demo-title { font-family: 'Space Grotesk', sans-serif; font-size: 27px; font-weight: 800; letter-spacing: -.02em; margin: 13px 0 7px; background: linear-gradient(120deg, #fafafa 30%, #FF6A00); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hs-demo-desc { font-size: 13px; color: var(--text-2); max-width: 580px; margin: 0 auto; line-height: 1.65; }
.hs-demo-video { position: relative; width: 100%; max-width: 880px; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; border: 1px solid rgba(255,106,0,0.35); box-shadow: 0 24px 70px rgba(0,0,0,0.55), 0 0 50px rgba(255,106,0,0.13); cursor: pointer; }
.hs-demo-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hs-demo-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hs-demo-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 72px; height: 50px; border: 0; border-radius: 14px; background: rgba(255,106,0,0.92); cursor: pointer; transition: background .15s, transform .15s; box-shadow: 0 6px 20px rgba(0,0,0,0.4); }
.hs-demo-play::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-38%,-50%); border-style: solid; border-width: 11px 0 11px 19px; border-color: transparent transparent transparent #fff; }
.hs-demo-video:hover .hs-demo-play { background: #FF6A00; transform: translate(-50%,-50%) scale(1.07); }
.hs-demo-steps { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.hs-demo-step { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 12px; font-size: 12.5px; color: #fafafa; background: rgba(255,255,255,0.05); border: 1px solid var(--border); backdrop-filter: blur(8px); }
.hs-demo-step span:first-child { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #FF6A00; color: #fff; font-size: 11px; font-weight: 700; flex-shrink: 0; }
/* 생성물 결과 영역 */
.hs-fx-result { display: flex; flex-direction: column; gap: 14px; align-items: center; }
/* 결과 영상 = 쇼츠 미리보기와 동일한 핸드폰 모양 프레임(9:16·높이 제한·중앙 정렬). 효과별 비율이 달라도 contain으로 잘리지 않게 letterbox. */
.hs-fx-phone { position: relative; aspect-ratio: 9 / 16; height: min(calc(100vh - 340px), 72vh); width: auto; max-width: 94%; margin: 0 auto; background: #0B0B0F; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,106,0,0.35); box-shadow: 0 24px 70px rgba(0,0,0,0.55), 0 0 50px rgba(255,106,0,0.13); }
.hs-fx-phone video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; display: block; }
.hs-fx-phone .hs-fx-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; color: var(--text-3); font-size: 13px; line-height: 1.7; }
.hs-fx-acts { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.hs-fx-acts .dl { padding: 9px 16px; font-size: 12.5px; }
.hs-fx-acts .dl svg { display: block; }
/* Video Effects 결과(#hs-fx-result 전용) = Shorts 미리보기(#hs-shorts-studio)와 동일 시각 통일: 세로 중앙·상하좌우 여백·Aurora 글로우. ID 셀렉터라 .hs-fx-result 클래스를 pending/fail에서만 공유하는 Avatar(#hs-av-result)·Motion(#hs-mc-result)에는 영향 없음. */
#hs-fx-result:not(.hidden) { position: relative; justify-content: center; gap: 16px; min-height: calc(100vh - 200px); padding: 24px 16px; }
#hs-fx-result:not(.hidden)::before { content: ''; position: absolute; top: 4%; left: 50%; transform: translateX(-50%); width: 74%; height: 50%; background: radial-gradient(ellipse at center, rgba(255,106,0,0.2), transparent 70%); filter: blur(64px); pointer-events: none; z-index: 0; }
#hs-fx-result > * { position: relative; z-index: 1; }
.hs-fx-grid:empty::before {
  content: '효과를 불러오는 중…'; color: var(--text-3); font-size: 12px; grid-column: 1 / -1; padding: 20px 0;
}
html[lang="en"] .hs-fx-grid:empty::before { content: 'Loading effects…'; }
html[lang="ja"] .hs-fx-grid:empty::before { content: 'エフェクトを読み込み中…'; }
html[lang="de"] .hs-fx-grid:empty::before { content: 'Effekte werden geladen…'; }
html[lang="pt"] .hs-fx-grid:empty::before { content: 'Carregando efeitos…'; }
html[lang="es"] .hs-fx-grid:empty::before { content: 'Cargando efectos…'; }
html[lang="fr"] .hs-fx-grid:empty::before { content: 'Chargement des effets…'; }

/* ─── H STUDIO · Shorts (쇼츠 자동제작) ─── */
.sh-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.sh-thumb { position: relative; width: 52px; height: 52px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); background: #000; flex-shrink: 0; }
.sh-thumb img, .sh-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-thumb-badge { position: absolute; left: 2px; bottom: 2px; padding: 0 4px; border-radius: 4px; background: rgba(0,0,0,0.6); color: #fff; font-size: 9px; font-weight: 700; pointer-events: none; }
.sh-thumb-del { position: absolute; top: 1px; right: 1px; width: 16px; height: 16px; border: 0; border-radius: 5px; background: rgba(0,0,0,0.6); color: #fff; font-size: 11px; line-height: 1; cursor: pointer; padding: 0; }
.sh-thumb-del:hover { background: #e23; }

.sh-seg { display: flex; gap: 4px; background: rgba(255,255,255,0.04); padding: 4px; border-radius: 10px; }
.sh-seg button { flex: 1; padding: 9px 0; border: 1px solid rgba(255,255,255,0.07); border-radius: var(--r-md); background: transparent; color: var(--text-2); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.sh-seg button.active { background: rgba(255,106,0,0.18); color: #FF6A00; border-color: rgba(255,106,0,0.42); }

/* Shorts 미리보기 영역 — Avatar·Motion 데모(.hs-demo)와 동일 시네마틱 톤: Aurora 글로우 + 9:16 캔버스 상하좌우 센터 */
#hs-shorts-studio { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: calc(100vh - 200px); padding: 24px 16px; }
#hs-shorts-studio.hidden { display: none; }   /* ID display:flex가 .hidden(클래스)을 이겨 안 숨겨지던 버그 — Avatar/Motion/VE 전환 시 우측이 항상 Shorts 미리보기로 고정되던 원인 수정 */
#hs-shorts-studio::before { content: ''; position: absolute; top: 4%; left: 50%; transform: translateX(-50%); width: 74%; height: 50%; background: radial-gradient(ellipse at center, rgba(255,106,0,0.2), transparent 70%); filter: blur(64px); pointer-events: none; z-index: 0; }
#hs-shorts-studio > * { position: relative; z-index: 1; }
.sh-head { text-align: center; }
.sh-head-desc { font-size: 12.5px; color: var(--text-2); max-width: 460px; margin: 7px auto 0; line-height: 1.6; }
/* flex 센터 컨텍스트 — 자식(sh-stage)이 absolute라 내재 높이 0 → 명시 height 부여(aspect-ratio가 width 도출). max-width로 좁은 패널 오버플로 방지 */
/* 캔버스 = 선택 비율(JS 가 aspect-ratio 설정·9:16/1:1/4:5) = 출력 movie 비율과 동일(업계 표준 A·미리보기=완성본). 세로 높이 고정·폭은 비율대로 자동(1:1 넓음·9:16 좁음). */
.sh-canvas { position: relative; container-type: inline-size; aspect-ratio: 9 / 16; height: min(calc(100vh - 340px), 72vh); width: auto; max-width: 94%; margin: 0 auto; background: #0B0B0F; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,106,0,0.35); box-shadow: 0 24px 70px rgba(0,0,0,0.55), 0 0 50px rgba(255,106,0,0.13); }
/* 폰 캔버스 래퍼 — 컨트롤은 간편·전문가 모두 왼쪽 컬럼(_shApplyMode)·오른쪽=폰만 (2026-07-19) */
.sh-stage-row { display: flex; gap: 22px; align-items: flex-start; justify-content: center; width: 100%; }
.sh-stage-row .sh-canvas { margin: 0; flex-shrink: 0; }
.sh-preview-ctrls { text-align: left; }
/* 간편 모드 — 컨트롤(비율·제목·자막)이 왼쪽 소재 아래로 이동(_shApplyMode) → 왼쪽 폭 전체 사용 */
.studio-ctrl-body .sh-preview-ctrls { width: 100%; margin-top: 14px; }
.sh-stage { position: absolute; inset: 0; }
.sh-stage img, .sh-stage video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-stage-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-3); font-size: 13px; line-height: 1.7; text-align: center; padding: 24px; }
.sh-caption-layer { position: absolute; left: 0; right: 0; bottom: 20%; display: flex; justify-content: center; padding: 0 8%; pointer-events: none; }
.sh-cap { font-family: 'Noto Sans KR', system-ui, sans-serif; font-weight: 900; text-align: center; line-height: 1.28; font-size: clamp(12px, 4.8cqi, 30px); word-break: keep-all; overflow-wrap: anywhere; max-width: 100%; }   /* cqi=프리뷰 박스 폭 기준·overflow-wrap=긴 JP 자막이 박스 밖으로 삐지지 않게 */
.sh-cap.pop { color: #fff; -webkit-text-stroke: 1px #000; paint-order: stroke fill; text-shadow: 0 2px 6px rgba(0,0,0,0.6), 0 0 2px #000; }   /* paint-order: 외곽선을 글자 뒤로 → 한글 획 안쪽 뭉갬(모바일 겹침) 방지 */
.sh-cap.pop .hl { color: #f7c204; }
.sh-cap.box { color: #111; }
.sh-cap.box span { background: #f7c204; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 2px 8px; border-radius: 4px; line-height: 1.7; }
.sh-cap.clean { color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.85); }
/* 자막 미리보기 샘플 — 클릭하면 숨김(실제 프레임 확인용). 레이어는 pointer-events:none, 샘플/복원칩만 클릭 가능 */
.sh-cap-sample { cursor: pointer; pointer-events: auto; }
.sh-cap-restore { pointer-events: auto; cursor: pointer; padding: 6px 13px; border-radius: 999px; background: rgba(0,0,0,0.55); color: #fff; border: 1px solid rgba(255,255,255,0.25); font-family: inherit; font-size: 11px; font-weight: 600; backdrop-filter: blur(4px); }
.sh-cap-restore:hover { background: rgba(0,0,0,0.72); }
/* 표지(1번 SHOT) 배지 — 미리보기는 항상 첫 SHOT 고정 표시 */
.sh-cover-badge { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,0.55); color: #fff; font-size: 11px; font-weight: 600; border: 1px solid rgba(255,255,255,0.18); pointer-events: none; backdrop-filter: blur(4px); }
.sh-cap.lg { font-size: clamp(15px, 6.2cqi, 40px); }   /* 자막 크게 */
/* 상단 고정 제목(후킹) — 미리보기 오버레이. 실제 렌더=json2video movie-level text element(전 SHOT 지속). */
.sh-title-layer { position: absolute; left: 0; right: 0; top: 15%; display: flex; justify-content: center; padding: 0 8%; pointer-events: none; z-index: 2; }   /* top 15%≈290px = 유튜브 쇼츠 상단 세이프존(288px) 하단 */
.sh-title-layer.pos-upper { top: 25%; }
.sh-title-layer.style-bar { top: 0; padding: 3.4% 7%; background: rgba(0,0,0,0.82); }
.sh-title-txt { font-family: 'Noto Sans KR', system-ui, sans-serif; font-weight: 900; text-align: center; line-height: 1.25; word-break: keep-all; overflow-wrap: anywhere; max-width: 100%; font-size: clamp(13px, 5.2cqi, 32px); -webkit-text-stroke: 1px #000; paint-order: stroke fill; text-shadow: 0 2px 7px rgba(0,0,0,0.65), 0 0 2px #000; }   /* cqi=프리뷰 박스 폭 기준(vw 뷰포트 아님) — 긴 JP/EN 제목이 박스 비율대로 축소돼 넘침·2줄 방지. paint-order: 한글 외곽선 겹침(모바일) 방지 */
.sh-title-txt.sz-small { font-size: clamp(11px, 4.2cqi, 24px); }
.sh-title-txt.sz-large { font-size: clamp(15px, 6.6cqi, 44px); }
.sh-title-txt.c-yellow { color: #FFD400; }
.sh-title-txt.c-white { color: #FFFFFF; }
.sh-title-txt.c-black { color: #111111; -webkit-text-stroke: 1px rgba(255,255,255,0.9); text-shadow: 0 2px 7px rgba(255,255,255,0.55); }
.sh-title-txt.c-orange { color: #FF6A00; }
.sh-title-layer.style-bar .sh-title-txt { -webkit-text-stroke: 0; text-shadow: none; }
/* 제목 비었을 때 안내 placeholder — 제목이 여기 뜬다는 걸 소비자가 인지(흐린 점선) */
.sh-title-sample { opacity: 0.5; }   /* 제목 예시(미입력 시) — 실제 제목 스타일 + 흐림으로 "선택·예시" 시각화 */
/* 제목 색 스와치 */
.sh-title-colors { display: flex; gap: 6px; align-items: center; }
.sh-title-colors button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border); background: var(--sw); cursor: pointer; padding: 0; transition: transform .12s, border-color .12s; }
.sh-title-colors button.active { border-color: var(--acc); transform: scale(1.12); box-shadow: 0 0 0 2px rgba(255,106,0,0.25); }
/* 세이프존 가이드 오버레이(1080x1920 기준 % 환산) — 플랫폼별 데드존 통합(하단 ~16%·우측 ~11%)·안전영역 점선 */
.sh-safe { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.sh-safe-dead { position: absolute; background: rgba(226,40,40,0.20); border: 1px solid rgba(226,40,40,0.5); }
.sh-safe-bottom { left: 0; right: 0; bottom: 0; height: 16%; }
.sh-safe-right { top: 0; bottom: 0; right: 0; width: 11%; }
.sh-safe-box { position: absolute; top: 14%; left: 8%; right: 8%; bottom: 16%; border: 1.5px dashed rgba(255,255,255,0.72); border-radius: 6px; }
.sh-safe-box span { position: absolute; top: 5px; left: 50%; transform: translateX(-50%); font-size: 10px; color: #fff; background: rgba(0,0,0,0.55); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.sh-safe-label { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); font-size: 10px; color: #fff; background: rgba(226,40,40,0.72); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.sh-safezone-on { background: var(--acc) !important; color: #fff !important; border-color: var(--acc) !important; }
.sh-meta { margin-top: 10px; text-align: center; font-size: 12px; }
/* Shorts 라이브러리 피커 모달 — 라이브러리 이미지·영상을 골라 SHOT 소재로 추가 */
.sh-lib-backdrop { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.62); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.sh-lib-modal { background: #0e0f10; border: 1px solid var(--border); border-radius: 16px; width: min(720px, 100%); max-height: 84vh; display: flex; flex-direction: column; box-shadow: 0 24px 70px rgba(0,0,0,0.6); }
.sh-lib-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.sh-lib-close { background: none; border: 0; color: var(--text-3); font-size: 20px; cursor: pointer; line-height: 1; }
.sh-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; padding: 16px; overflow-y: auto; }
.sh-lib-empty { padding: 40px 16px; text-align: center; color: var(--text-3); font-size: 13px; line-height: 1.7; }
.sh-lib-item { position: relative; aspect-ratio: 1; border-radius: 9px; overflow: hidden; border: 2px solid transparent; cursor: pointer; background: #000; }
.sh-lib-item img, .sh-lib-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-lib-item.sel { border-color: var(--acc); }
.sh-lib-badge2 { position: absolute; left: 3px; bottom: 3px; padding: 0 5px; border-radius: 4px; background: rgba(0,0,0,0.62); color: #fff; font-size: 9px; font-weight: 700; pointer-events: none; }
.sh-lib-check { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--acc); color: #fff; font-size: 11px; display: none; align-items: center; justify-content: center; pointer-events: none; }
.sh-lib-item.sel .sh-lib-check { display: flex; }
.sh-lib-foot { display: flex; gap: 8px; justify-content: flex-end; align-items: center; padding: 12px 18px; border-top: 1px solid var(--border); }
/* Shorts 드랍다운(존댓말/반말·나레이션 스타일·음성·자막·전환 등)·라이브러리 버튼 텍스트 가운데 정렬 */
#hs-shorts-wrap select { text-align: center; text-align-last: center; }
#hs-sh-libpick { text-align: center; }
/* 전문가 모드 — SHOT별 편집 리스트 */
.sh-pro-head { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.sh-autofill { font-size: 11px; padding: 5px 11px; }
.sh-cuts { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.sh-cut-row { display: flex; gap: 8px; padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,0.02); cursor: pointer; transition: border-color .15s, background .15s; }
.sh-cut-row.active { border-color: rgba(255,106,0,0.6); background: rgba(255,106,0,0.06); }
.sh-cut-thumb { position: relative; width: 46px; height: 46px; border-radius: 7px; overflow: hidden; flex-shrink: 0; background: #000; }
.sh-cut-thumb img, .sh-cut-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-cut-num { position: absolute; top: 1px; left: 1px; padding: 0 4px; border-radius: 4px; background: rgba(0,0,0,0.62); color: #fff; font-size: 9px; font-weight: 700; }
.sh-cut-fields { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sh-cut-fields input { width: 100%; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: rgba(0,0,0,0.22); color: var(--text-1); font-family: inherit; font-size: 12px; }
.sh-cut-fields input:focus { outline: none; border-color: rgba(255,106,0,0.55); }
.sh-cut-del { align-self: flex-start; width: 18px; height: 18px; border: 0; border-radius: 5px; background: rgba(0,0,0,0.5); color: #fff; cursor: pointer; font-size: 12px; line-height: 1; padding: 0; flex-shrink: 0; }
.sh-cut-del:hover { background: #e23; }

/* ── SHOT 편집 폼(섹션 그룹핑) — H FLOW·H SCENE 제작보드 인라인 편집 (_hsOpenShotEditor) ── */
.hs-ef-wrap { border: 1px solid rgba(255,106,0,0.5); border-radius: 10px; padding: 14px; margin-top: 10px; background: rgba(255,106,0,0.05); }
.hs-ef-title { font-weight: 700; margin-bottom: 6px; }
.hs-ef-sec { font-size: 11px; font-weight: 700; color: #FF6A00; letter-spacing: 0.3px; margin: 16px 0 8px; padding-bottom: 4px; border-bottom: 1px solid rgba(255,106,0,0.22); }
.hs-ef-sec:first-of-type { margin-top: 4px; }
.hs-ef-field { margin: 0 0 9px; }
.hs-ef-field label { display: block; margin: 0 0 4px; font-size: 12px; font-weight: 500; color: #d8d8d4; }
.hs-ef-field input, .hs-ef-field textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid rgba(255,255,255,0.16); border-radius: 6px; background: rgba(0,0,0,0.34); color: var(--text-1); font-family: inherit; font-size: 13px; line-height: 1.55; transition: border-color 0.12s, box-shadow 0.12s; }
.hs-ef-field input::placeholder, .hs-ef-field textarea::placeholder { color: var(--text-2); }
.hs-ef-field textarea { resize: vertical; }
.hs-ef-hr { border: none; border-top: 1px solid rgba(255,255,255,0.12); margin: 14px 0; }
.hs-ef-field input:focus, .hs-ef-field textarea:focus { outline: none; border-color: #FF6A00; box-shadow: 0 0 0 2px rgba(255,106,0,0.18); }
.hs-ef-row { display: flex; gap: 10px; margin: 0 0 9px; }
.hs-ef-row .hs-ef-field { margin: 0; flex: 1; min-width: 0; }

/* ── PRODUCTION 씬 분리기(씬 카드 워크스페이스) — 기존 팔레트 재사용·신규 라이브러리 0 ── */
.prod-toolbar { margin: 0 0 12px; }
.prod-proj-title { font-size: 14px; margin: 0 0 8px; color: var(--text-1); }
.prod-toolbar-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.prod-search { flex: 1; min-width: 160px; box-sizing: border-box; background: rgba(0,0,0,0.34); border: 1px solid rgba(255,255,255,0.16); border-radius: 8px; padding: 7px 10px; color: var(--text-1); font-family: inherit; font-size: 13px; }
.prod-search:focus { outline: none; border-color: #FF6A00; box-shadow: 0 0 0 2px rgba(255,106,0,0.18); }
.prod-filters { display: flex; gap: 4px; }
.prod-filter { padding: 6px 12px; border-radius: 8px; font-size: 12px; color: var(--text-2); background: rgba(255,255,255,0.04); border: 1px solid transparent; cursor: pointer; }
.prod-filter:hover { color: var(--text-1); }
.prod-filter-on { color: #FF6A00; background: rgba(255,106,0,0.12); border-color: rgba(255,106,0,0.3); }
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.prod-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; transition: border-color 0.2s; }
.prod-card:hover { border-color: rgba(255,106,0,0.3); }
.prod-card-top { display: flex; justify-content: space-between; align-items: center; }
.prod-num { font-weight: 700; font-size: 15px; color: #FF6A00; }
.prod-badge { font-size: 10px; padding: 3px 8px; border-radius: 6px; color: var(--text-2); background: rgba(255,255,255,0.05); }
.prod-badge-sent { color: #FF6A00; background: rgba(255,106,0,0.14); }
.prod-card-loc { font-size: 13px; font-weight: 600; color: var(--text-1); line-height: 1.4; min-height: 36px; }
.prod-card-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.prod-chip { font-size: 10px; padding: 2px 7px; border-radius: 5px; background: rgba(255,255,255,0.06); color: var(--text-2); }
.prod-chip-dn { background: rgba(120,140,255,0.12); color: #aab6ff; }
.prod-chip-len { background: rgba(255,255,255,0.04); color: var(--text-2); }
.prod-card-prev { font-size: 11px; line-height: 1.5; color: var(--text-2); min-height: 32px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prod-card-body { display: flex; flex-direction: column; gap: 8px; cursor: pointer; }
.prod-send { width: 100%; text-align: center; margin-top: 2px; }
.prod-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.prod-actions .dl, .prod-actions .prod-filter { font-size: 12px; }
.prod-send-sel { padding: 6px 14px; font-size: 12px; border-radius: 8px; }
.prod-send-sel:disabled { opacity: 0.45; cursor: not-allowed; }
.prod-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.prod-check input { width: 15px; height: 15px; accent-color: #FF6A00; cursor: pointer; margin: 0; }
.prod-card-sel { border-color: rgba(255,106,0,0.55) !important; background: rgba(255,106,0,0.06); }

/* 경로 그리기 모달 (CANVAS pathdraw 노드 — 전체화면 팝업 캔버스) */
.pd-modal-ov { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.pd-modal { width: 100%; max-width: 760px; max-height: 90vh; overflow: auto; background: #101015; border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; padding: 18px; box-shadow: 0 24px 80px rgba(0,0,0,0.6); }
.pd-modal-hd { font-size: 13px; font-weight: 600; color: #e8e8f0; margin-bottom: 12px; }
.pd-modal-ft { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 14px; }
.pd-modal-ft .pd-save { width: auto; padding: 8px 22px; }
.pd-modal-ft .pd-cancel { padding: 8px 16px; }

/* 언어 스위처 (사이드바 푸터 + 사이트 푸터 — KO | EN) */
.lang-switch { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11px; }
.lang-switch a { color: #a1a1aa; text-decoration: none; padding: 1px 3px; border-radius: 4px; letter-spacing: 0.02em; }
.lang-switch a:hover { color: #e4e4e7; }
.lang-switch a.lang-active { color: #FF6A00; font-weight: 600; }
.lang-switch .lang-sep { color: #52525b; }
/* 언어 드롭다운(사이드바 최상단·로고 아래) — 🌐 현재언어 + 목록 팝오버 */
.lang-dd { position: relative; z-index: 80; margin: 6px 12px 8px; }   /* .sidebar>*{z-index:1} 오버라이드 — 팝오버가 nav 탭 위로 */
.lang-dd-btn { display: flex; align-items: center; gap: 7px; width: 100%; padding: 8px 11px; border-radius: 9px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); color: #d4d4d8; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; line-height: 1; }
.lang-dd-btn:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,106,0,0.3); color: #f5f5f0; }
.lang-dd-globe { color: #FF6A00; flex-shrink: 0; }
.lang-dd-cur { flex: 1; text-align: left; }
.lang-dd-caret { color: #71717a; flex-shrink: 0; transition: transform .18s; }
.lang-dd.open .lang-dd-caret { transform: rotate(180deg); }
.lang-dd-pop { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 70; background: #1a1b1f; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 4px; box-shadow: 0 12px 30px -8px rgba(0,0,0,0.7); }
/* 레일(접힘) 상태: 사이드바 폭(약 72px)에 팝오버가 갇혀 긴 언어명(Português·Deutsch)이 잘리던 문제 — 밖으로 펼치고 최소폭 확보 */
.sidebar.rail:not(:hover) .lang-dd-pop { right: auto; min-width: 148px; }
.lang-dd-pop a { white-space: nowrap; }
.lang-dd-pop a { display: block; padding: 8px 11px; border-radius: 7px; font-size: 12.5px; color: #d4d4d8; text-decoration: none; }
.lang-dd-pop a:hover { background: rgba(255,255,255,0.08); }
.lang-dd-pop a.lang-active { color: #FF6A00; font-weight: 600; }

/* ── FAQ 모달 — 최신 아코디언(카드형·chevron 회전·hover·open 강조) ── */
#faq-modal .hm-geo-faq { margin-top: 4px; }
#faq-modal .faq-item { border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; margin-bottom: 10px; background: rgba(255,255,255,0.02); transition: border-color .18s, background .18s; }
#faq-modal .faq-item:hover { border-color: rgba(255,106,0,0.3); }
#faq-modal .faq-item[open] { border-color: rgba(255,106,0,0.28); background: rgba(255,106,0,0.045); }
#faq-modal .faq-item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 14px 16px; font-size: 15px; font-weight: 600; color: #e4e4e7; user-select: none; -webkit-user-select: none; }
#faq-modal .faq-item > summary::-webkit-details-marker { display: none; }
#faq-modal .faq-item > summary::after { content: ''; margin-left: auto; flex-shrink: 0; width: 8px; height: 8px; border-right: 2px solid #FF6A00; border-bottom: 2px solid #FF6A00; transform: rotate(45deg); transition: transform .22s ease; }
#faq-modal .faq-item[open] > summary::after { transform: rotate(-135deg); }
#faq-modal .faq-item > summary:hover { color: #fafafa; }
#faq-modal .faq-a { padding: 0 16px 16px; color: #a1a1aa; line-height: 1.72; font-size: 14px; }

/* ─── 가입 무료 크레딧 안내바 (비로그인 게스트 전용 — app.js _updatePromoBar) ── */
:root { --promo-h: 44px; }
#promo-bar {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: var(--promo-h); box-sizing: border-box; padding: 4px 48px 4px 16px;
  position: relative; z-index: 50; flex-shrink: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 13.5px; font-weight: 500; color: #EDEDEF;
  background: linear-gradient(180deg, rgba(255,106,0,0.10), rgba(255,106,0,0.028));
  border-bottom: 1px solid rgba(255,106,0,0.32);
  box-shadow: 0 6px 28px -10px rgba(255,106,0,0.5);
  animation: promo-glow-pulse 5s ease-in-out infinite alternate;
}
@keyframes promo-glow-pulse {
  from { box-shadow: 0 6px 28px -10px rgba(255,106,0,0.5); border-bottom-color: rgba(255,106,0,0.32); }
  to   { box-shadow: 0 6px 40px -8px rgba(255,106,0,0.72); border-bottom-color: rgba(255,106,0,0.5); }
}
/* 배너 노출 시 앱 높이 보정 (h-screen 특이도 우위 — 게스트 아닐 땐 클래스 제거=영향 0) */
body.promo-on .app-root { height: calc(100vh - var(--promo-h)); }
#promo-bar b { color: var(--acc2); font-family: var(--font-display); font-weight: 700; text-shadow: 0 0 22px rgba(255,106,0,0.52); }
#promo-bar .promo-cta { font-size: 11px; padding: 6px 16px; flex-shrink: 0; }
#promo-bar .promo-chev { display: none; flex-shrink: 0; color: var(--acc2); filter: drop-shadow(0 0 6px rgba(255,106,0,0.5)); }
#promo-x { position: absolute; right: 0; top: 0; bottom: 0; width: 44px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: #8a8a9e; font-size: 15px; cursor: pointer; transition: color .18s; }
#promo-x:hover { color: var(--acc2); }
@media (max-width: 1023px) {
  :root { --promo-h: 42px; }
  #promo-bar { justify-content: flex-start; gap: 8px; padding: 4px 40px 4px 12px; font-size: 12.5px; }
  #promo-bar .promo-txt-pc, #promo-bar .promo-cta { display: none; }
  /* 긴 언어(de·pt)가 2줄로 넘쳐 배너 높이(--promo-h 고정)를 초과해 하단 앱과 겹치던 문제 — 11px 축소로 전 언어 1줄 실측(de 272·pt 251 ≤ 가용 277px) + nowrap 안전망 */
  #promo-bar .promo-txt-m { flex: 1 1 auto; min-width: 0; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #promo-bar .promo-chev { display: inline-flex; margin-left: auto; }
  #promo-x { width: 40px; }
}
@media (min-width: 1024px) { #promo-bar .promo-txt-m { display: none; } }
@media (prefers-reduced-motion: reduce) { #promo-bar { animation: none; } }