:root {
  --bg-main: #0a0d14;
  --bg-card: rgba(22, 28, 44, 0.75);
  --bg-card-hover: rgba(30, 38, 60, 0.85);
  --border-color: rgba(255, 255, 255, 0.08);
  --border-focus: rgba(99, 102, 241, 0.6);
  --primary: #6366f1;
  --primary-hover: #4f46e5;
  --primary-glow: rgba(99, 102, 241, 0.35);
  --accent: #06b6d4;
  --accent-purple: #a855f7;
  --accent-gold: #f59e0b;
  --success: #10b981;
  --danger: #ef4444;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-dim: #64748b;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --font-main: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
  --font-brand: 'Outfit', sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-main);
  background-color: var(--bg-main);
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.12) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(168, 85, 247, 0.1) 0%, transparent 40%);
  color: var(--text-main);
  min-height: 100vh;
  line-height: 1.5;
  overflow-x: hidden;
}

.app-layout {
  max-width: 1540px;
  margin: 0 auto;
  padding: 20px 24px;
}

/* Header */
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  margin-bottom: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.logo-icon {
  font-size: 28px;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  box-shadow: 0 4px 16px var(--primary-glow);
  overflow: hidden;
}

.logo-icon img {
  display: block;
  width: 39px;
  height: 39px;
  object-fit: contain;
}

.brand-text h1 {
  font-family: var(--font-brand);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.brand-text h1 span {
  background: linear-gradient(135deg, #6366f1, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand-text p {
  font-size: 13px;
  color: var(--text-muted);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.status-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--success);
  background: rgba(16, 185, 129, 0.1);
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.status-badge .dot {
  width: 8px;
  height: 8px;
  background-color: var(--success);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--success);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
  100% { opacity: 1; transform: scale(1); }
}

/* Studio Grid Layout */
.studio-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 1024px) {
  .studio-grid {
    grid-template-columns: 1fr;
  }
}

/* Steps Cards */
.controls-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.step-card {
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: all 0.25s ease;
}

.step-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
  background: var(--bg-card-hover);
}

.step-card.active {
  border-color: rgba(99, 102, 241, 0.4);
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.08);
}

.step-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.step-num {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--primary), var(--accent-purple));
  color: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 2px 10px var(--primary-glow);
}

.step-info h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
}

.step-info p {
  font-size: 13px;
  color: var(--text-muted);
}

.step-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Inputs & Buttons */
.input-group {
  display: flex;
  gap: 10px;
}

input[type="text"], select, textarea {
  width: 100%;
  padding: 12px 16px;
  background: rgba(10, 13, 20, 0.8);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-main);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

input[type="color"] { width: 100%; min-height: 42px; padding: 4px; background: rgba(10,13,20,.8); border: 1px solid var(--border-color); border-radius: var(--radius-sm); }
.subtitle-style-box { margin-top: 12px; padding: 16px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: rgba(0,0,0,.25); display: flex; flex-direction: column; gap: 12px; }
.scene-drag-handle { flex:0 0 30px; align-self:stretch; border:1px solid rgba(99,102,241,.28); border-radius:8px; color:#a5b4fc; background:rgba(79,70,229,.12); cursor:grab; font-size:20px; line-height:1; }
.scene-drag-handle:active { cursor:grabbing; }
.script-line-item.scene-dragging { opacity:.45; }
.script-line-item.scene-drop-target { outline:2px solid #67e8f9; outline-offset:2px; background:rgba(34,211,238,.07); }

input[type="text"]:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.btn-primary, .btn-secondary, .btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), #4f46e5);
  color: #fff;
  box-shadow: 0 4px 14px var(--primary-glow);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.45);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
}

.btn-accent {
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  color: #fff;
  width: 100%;
  padding: 14px;
  box-shadow: 0 4px 14px rgba(236, 72, 153, 0.3);
}

.btn-accent:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(236, 72, 153, 0.45);
}

.divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--text-dim);
  font-size: 12px;
}

.divider::before, .divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--border-color);
}

.divider span {
  padding: 0 10px;
}

.drop-zone {
  border: 2px dashed rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background: rgba(0, 0, 0, 0.15);
}

.drop-zone:hover {
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.05);
}

.drop-icon {
  font-size: 28px;
  display: block;
  margin-bottom: 6px;
}

.drop-content p {
  font-size: 13px;
  color: var(--text-muted);
}

/* Sliders */
.slider-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.slider-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.slider-label {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-muted);
}

.slider-val {
  font-weight: 600;
  color: var(--accent);
}

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: var(--primary);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 10px var(--primary-glow);
  transition: transform 0.1s;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

/* Scene Editor Dynamic List */
.scene-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
}

.btn-add-scene {
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.4);
  color: #818cf8;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-add-scene:hover {
  background: rgba(99, 102, 241, 0.3);
  color: #fff;
}

.script-editor-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 6px;
}

.script-editor-list::-webkit-scrollbar {
  width: 6px;
}
.script-editor-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

.script-line-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(15,23,42,.92), rgba(30,27,75,.28));
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
}
.script-line-item .scene-input { flex:1; min-width:180px; }

.script-line-item:focus-within {
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.08);
}

.line-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 6px 8px;
  border-radius: 6px;
  white-space: nowrap;
  min-width: 72px;
  text-align: center;
  background: rgba(255, 255, 255, 0.08);
  color: var(--accent);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-del-line {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 15px;
  padding: 4px 6px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}

.btn-del-line:hover {
  color: var(--danger);
  background: rgba(239, 68, 68, 0.1);
}
.btn-ai-line { border: 1px solid rgba(236,72,153,.45); background: rgba(236,72,153,.12); color: #f9a8d4; border-radius: 6px; padding: 6px 8px; cursor: pointer; white-space: nowrap; }
.commercial-modal { max-width: 420px; }
.commercial-modal.pricing-modal { width:min(940px,calc(100vw - 36px)); max-width:940px; max-height:min(900px,calc(100vh - 36px)); overflow-y:auto; padding:0; }
.pricing-modal-header { align-items:flex-start; padding:28px 30px 22px; background:linear-gradient(135deg,#F8FAFF 0%,#EEF3FF 100%); border-bottom:1px solid #DCE5F8; }
.pricing-modal-header > div { min-width:0; }
.pricing-modal-header h3 { margin:5px 0 6px; font-size:24px; line-height:1.25; color:#172033; letter-spacing:-.6px; }
.pricing-modal-header p { margin:0; color:#657089; font-size:13px; line-height:1.55; }
.pricing-eyebrow { color:#2C68FB; font-family:var(--font-brand); font-size:10px; font-weight:800; letter-spacing:1.2px; }
.pricing-modal > .plan-comparison,.pricing-modal > .usage-summary,.pricing-modal > .manual-payment-panel,.pricing-modal > .config-notice,.pricing-modal > .pricing-faq { margin-left:30px; margin-right:30px; }
.pricing-modal > .plan-comparison { margin-top:26px; }
.pricing-modal > .config-notice:last-child { margin-bottom:24px; }
.modal-guide,.config-notice { color: var(--text-muted); font-size: 13px; }
.config-notice { color: #fbbf24; min-height: 18px; }
.social-login { width: 100%; border: 0; padding: 14px; border-radius: 8px; font-weight: 800; cursor: pointer; }
.social-login.naver { background: #03c75a; color: white; }
.social-login.kakao { background: #fee500; color: #191919; }
.social-login + .social-login { margin-top:9px; }
.terms-agreement { display:flex; gap:8px; align-items:center; margin:12px 0; color:var(--text-muted); font-size:12px; }
.auth-user-card { display:flex; align-items:center; gap:12px; padding:14px; border:1px solid rgba(255,255,255,.12); border-radius:12px; background:rgba(255,255,255,.04); }
.auth-user-card img { width:46px; height:46px; border-radius:50%; object-fit:cover; background:#252b3b; }
.auth-user-card div { flex:1; display:flex; flex-direction:column; gap:4px; }
.auth-user-card small { color:var(--text-muted); }
.auth-user-card button { border:1px solid rgba(255,255,255,.2); background:transparent; color:#fff; padding:7px 9px; border-radius:7px; cursor:pointer; }
.login-modal { width:min(520px,calc(100vw - 28px)); max-width:520px; max-height:calc(100vh - 28px); padding:0; gap:0; overflow:auto; border:1px solid #DCE4F2; border-radius:22px; background:#FFFFFF; box-shadow:0 30px 80px rgba(24,39,75,.25); }
.login-modal-hero { position:relative; display:grid; grid-template-columns:58px minmax(0,1fr) 32px; align-items:start; gap:15px; padding:27px 27px 24px; border-bottom:1px solid #DCE5F8; background:linear-gradient(135deg,#F8FAFF 0%,#EEF3FF 100%); }
.login-brand-symbol { display:grid; width:58px; height:58px; place-items:center; border:1px solid #D8E3FF; border-radius:17px; background:#FFFFFF; box-shadow:0 8px 20px rgba(55,108,251,.13); }
.login-brand-symbol img { width:45px; height:45px; object-fit:contain; }
.login-modal-hero>div:nth-child(2)>span { color:#376CFB; font:850 9px var(--font-brand); letter-spacing:.13em; }
.login-modal-hero h3 { margin:6px 0 0; color:#172033; font-size:24px; line-height:1.3; letter-spacing:-.7px; }
.login-modal-hero p { max-width:350px; margin:8px 0 0; color:#647087; font-size:11px; line-height:1.6; }
.login-modal-hero .modal-close { align-self:start; width:32px; height:32px; border-radius:9px; color:#7A8598; line-height:1; }
.login-modal-hero .modal-close:hover { background:rgba(55,108,251,.09); color:#376CFB; }
.login-modal-body { display:grid; gap:16px; padding:22px 27px 24px; }
.login-benefit-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.login-benefit-row>div { min-width:0; padding:12px 10px; border:1px solid #E2E8F2; border-radius:12px; background:#FAFBFD; }
.login-benefit-row span { display:block; color:#376CFB; font:850 9px var(--font-brand); }
.login-benefit-row b { display:block; margin-top:7px; color:#344054; font-size:11px; }
.login-benefit-row small { display:block; margin-top:3px; color:#8A94A6; font-size:8.5px; line-height:1.45; }
.login-section-label { margin:0 0 9px; color:#667085; font-size:10px; font-weight:750; }
.login-modal .social-login { display:flex; align-items:center; gap:12px; min-height:52px; padding:10px 14px; border-radius:12px; box-shadow:none; font-family:var(--font-main); transition:transform .15s ease,filter .15s ease; }
.login-modal .social-login:hover { transform:translateY(-1px); filter:brightness(.98); }
.login-modal .social-login:disabled { opacity:.55; cursor:wait; transform:none; }
.social-brand-icon { display:grid; flex:0 0 32px; height:32px; place-items:center; border-radius:9px; background:rgba(255,255,255,.2); font:900 15px Arial,sans-serif; }
.social-login.kakao .social-brand-icon { background:rgba(25,25,25,.08); font-size:15px; }
.social-login b { flex:1; text-align:left; font-size:13px; }
.social-login em { font-size:16px; font-style:normal; font-weight:500; opacity:.58; }
.login-modal .terms-agreement { align-items:flex-start; margin:12px 0 0; padding:12px 13px; border:1px solid #E1E7F0; border-radius:11px; background:#F8FAFC; color:#667085; line-height:1.45; cursor:pointer; }
.login-modal .terms-agreement input { flex:0 0 auto; margin-top:2px; accent-color:#376CFB; }
.login-modal .terms-agreement b { margin-right:4px; color:#376CFB; font-size:10px; }
.login-modal .field-col { margin-top:12px; }
.login-modal .field-col label { color:#526078; font-size:10px; font-weight:750; }
.login-modal .field-col input { min-height:43px; border:1px solid #D8E0ED; border-radius:10px; background:#FFFFFF; color:#344054; }
.login-modal .auth-user-card { padding:15px; border-color:#DCE4F1; border-radius:13px; background:#F8FAFD; }
.login-modal .auth-user-card strong { color:#26344C; font-size:13px; }
.login-modal .auth-user-card button { border-color:#D4DDEB; background:#FFFFFF; color:#526078; }
.login-trust-note { display:flex; align-items:flex-start; gap:8px; margin:0; padding-top:2px; color:#8A94A6; font-size:9px; line-height:1.55; }
.login-trust-note span { flex:0 0 auto; }
.login-modal .config-notice { min-height:0; margin:0; color:#D06B19; font-size:10px; line-height:1.5; }
.pricing-card { position:relative; display:flex; flex-direction:column; gap:14px; min-width:0; min-height:490px; padding:26px; border:1px solid #D8E0EC; border-radius:18px; background:#fff; overflow:hidden; }
.plan-comparison { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.pricing-card.free-plan { border-color:#DCE3EF; background:#fff; }
.pricing-card.pro-plan { border:2px solid #2C68FB; background:linear-gradient(180deg,#F5F8FF 0%,#FFFFFF 42%); box-shadow:0 18px 44px rgba(44,104,251,.17); }
.plan-card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.plan-card-heading > div { display:flex; flex-direction:column; gap:5px; min-width:0; }
.plan-name { color:#172033; font-size:19px; font-weight:850; letter-spacing:-.35px; }
.plan-card-heading small { color:#758096; font-size:11px; line-height:1.45; }
.plan-badge { flex:none; padding:5px 9px; border-radius:999px; font-size:10px; font-weight:800; }
.free-badge { color:#526077; background:#F1F4F8; }
.pro-badge { color:#1749C7; background:#DDE7FF; }
.plan-price { display:flex; align-items:baseline; gap:5px; min-height:47px; }
.plan-price strong { color:#172033; font-size:36px; font-weight:900; letter-spacing:-1.4px; line-height:1; }
.plan-price span { color:#7C879C; font-size:12px; font-weight:650; }
.pro-price strong { color:#2C68FB; font-size:39px; }
.price-discount-row { display:flex; align-items:center; gap:9px; margin-bottom:-7px; }
.price-discount-row del { color:#9AA4B6; font-size:13px; font-weight:650; }
.price-discount-row b { padding:4px 8px; border-radius:999px; background:#FFF0F0; color:#E5484D; font-size:11px; }
.discount-caption { margin:-7px 0 0; color:#2C68FB; font-size:11px; font-weight:700; }
.plan-divider { height:1px; background:#E8EDF5; }
.plan-features { display:flex; flex-direction:column; gap:11px; margin:0; padding:0; color:#4E5A70; font-size:13px; line-height:1.45; list-style:none; }
.plan-features li { position:relative; padding-left:25px; }
.plan-features li::before { content:'✓'; position:absolute; left:0; top:-1px; display:grid; place-items:center; width:17px; height:17px; border-radius:50%; background:#E9F0FF; color:#2C68FB; font-size:10px; font-weight:900; }
.plan-features b { color:#1F4FC6; }
.plan-current-button,.pro-subscribe-button { width:100%; min-height:44px; margin-top:auto; border-radius:10px; font-weight:800; }
.plan-current-button { border:1px solid #DCE3EF; background:#F6F8FB; color:#7C879B; cursor:default; }
.pro-subscribe-button { font-size:14px; }
.payment-method-note { margin-top:-6px; color:#8993A5; text-align:center; font-size:10px; }
.pro-ribbon { position:absolute; top:15px; right:-39px; width:140px; padding:6px 0; transform:rotate(36deg); background:#2C68FB; color:#fff; text-align:center; font-size:9px; font-weight:900; letter-spacing:.2px; box-shadow:0 5px 14px rgba(44,104,251,.22); }
.manual-payment-panel { margin-top:16px; padding:16px; border:1px solid #9AB4FF; border-radius:12px; background:#EEF3FF; display:flex; flex-direction:column; gap:10px; }
.manual-payment-panel p { margin:0; color:var(--text-muted); font-size:13px; line-height:1.55; word-break:break-all; }
.usage-summary { margin:14px 0 0; padding:10px 12px; border-radius:10px; background:#F7F9FC; color:var(--text-muted); font-size:12px; line-height:1.6; }
.pricing-faq { margin-top:23px; margin-bottom:30px; padding-top:24px; border-top:1px solid #E5EAF2; }
.pricing-faq-heading { text-align:center; }
.pricing-faq-heading>span { color:#376CFB; font:850 9px var(--font-brand); letter-spacing:.13em; }
.pricing-faq-heading h4 { margin:7px 0 0; color:#1F2937; font-size:22px; letter-spacing:-.5px; }
.pricing-faq-heading p { margin:7px 0 0; color:#7D8798; font-size:11px; }
.pricing-faq-list { margin-top:18px; overflow:hidden; border:1px solid #E0E6F0; border-radius:15px; background:#FFFFFF; }
.pricing-faq-list details+details { border-top:1px solid #E8EDF4; }
.pricing-faq-list summary { display:grid; grid-template-columns:30px minmax(0,1fr) 22px; align-items:center; gap:10px; min-height:57px; padding:10px 16px; cursor:pointer; list-style:none; }
.pricing-faq-list summary::-webkit-details-marker { display:none; }
.pricing-faq-list summary:hover { background:#F8FAFF; }
.pricing-faq-list summary span { display:grid; width:26px; height:26px; place-items:center; border-radius:8px; background:#EEF3FF; color:#376CFB; font:850 9px var(--font-brand); }
.pricing-faq-list summary b { color:#344054; font-size:12px; line-height:1.45; }
.pricing-faq-list summary i { color:#8B95A7; font-size:16px; font-style:normal; text-align:center; transition:transform .15s ease; }
.pricing-faq-list details[open] summary { background:#F8FAFF; }
.pricing-faq-list details[open] summary i { transform:rotate(45deg); color:#376CFB; }
.pricing-faq-list details>p { margin:0; padding:0 18px 17px 56px; color:#667085; font-size:11px; line-height:1.7; word-break:keep-all; }
.refund-policy-note { display:flex; align-items:flex-start; gap:12px; margin-top:13px; padding:14px 16px; border:1px solid #D9E4FF; border-radius:12px; background:#F4F7FF; }
.refund-policy-note strong { flex:0 0 auto; color:#285AD9; font-size:10px; }
.refund-policy-note p { margin:0; color:#66738A; font-size:9px; line-height:1.65; }
.admin-payment-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 0; border-bottom:1px solid var(--border); }
.admin-payment-item > div:first-child { display:flex; flex-direction:column; gap:5px; min-width:0; }
.admin-payment-item small { color:var(--text-muted); }
.admin-payment-item > div:last-child { display:flex; gap:6px; flex-shrink:0; }
.admin-modal { width:min(820px,calc(100vw - 28px)); max-width:820px; max-height:calc(100vh - 36px); padding:0; gap:0; overflow:hidden; border:1px solid #DCE4F2; border-radius:20px; background:#FFFFFF; }
.admin-modal>.modal-header { padding:23px 25px 19px; border-bottom:1px solid #E5EAF2; background:linear-gradient(135deg,#F8FAFF,#EEF3FF); }
.admin-modal>.modal-header h3 { margin:4px 0 0; color:#1F2937; font-size:22px; }
.admin-eyebrow { color:#376CFB; font:850 9px var(--font-brand); letter-spacing:.12em; }
.admin-tabs { display:flex; gap:6px; padding:13px 25px 0; background:#FFFFFF; }
.admin-tabs button { min-height:38px; padding:8px 13px; border:1px solid transparent; border-radius:9px; background:transparent; color:#7A8496; cursor:pointer; font:800 11px var(--font-main); }
.admin-tabs button:hover { background:#F5F7FB; color:#475467; }
.admin-tabs button.active { border-color:#CEDBFF; background:#EEF3FF; color:#2C68FB; }
.admin-tabs span { display:inline-grid; min-width:19px; height:19px; margin-left:5px; place-items:center; border-radius:999px; background:#DDE7FF; color:#285AD9; font-size:9px; }
.admin-panel { min-height:260px; max-height:58vh; padding:17px 25px 24px; overflow:auto; }
.admin-user-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:13px; }
.admin-user-toolbar>div { display:flex; flex-direction:column; gap:3px; }
.admin-user-toolbar strong { color:#344054; font-size:13px; }
.admin-user-toolbar small { color:#8A94A6; font-size:9px; }
.admin-user-toolbar input { width:min(250px,45%); min-height:39px; padding:8px 11px; border:1px solid #D8E0ED; border-radius:9px; background:#FFFFFF; color:#344054; font:650 11px var(--font-main); }
.admin-user-item { display:grid; grid-template-columns:38px minmax(0,1.2fr) 70px minmax(155px,.8fr) 94px; align-items:center; gap:11px; padding:12px 4px; border-bottom:1px solid #ECF0F5; }
.admin-user-avatar { display:grid; width:36px; height:36px; place-items:center; border-radius:11px; background:#EEF3FF; color:#376CFB; font:850 13px var(--font-brand); }
.admin-user-identity,.admin-user-meta,.admin-user-date { display:flex; min-width:0; flex-direction:column; gap:4px; }
.admin-user-identity strong { overflow:hidden; color:#344054; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.admin-user-identity strong em { margin-left:4px; padding:2px 5px; border-radius:999px; background:#FFF0E8; color:#D06B19; font-size:8px; font-style:normal; }
.admin-user-identity small,.admin-user-date small { overflow:hidden; color:#8A94A6; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.admin-user-meta { align-items:flex-start; }
.admin-user-meta span { padding:3px 7px; border-radius:999px; background:#F0F2F6; color:#697386; font-size:8px; font-weight:850; }
.admin-user-meta span.pro { background:#E8F0FF; color:#2C68FB; }
.admin-user-meta small { color:#8993A4; font-size:9px; }
.admin-user-meta .account-abuse-flag { color:#EF4444; font-weight:850; }
.admin-user-date b { color:#667085; font-size:9px; font-weight:700; }
.admin-user-actions { display:flex; justify-content:flex-end; }
.admin-user-actions small { color:#8A94A6; font-size:8px; text-align:right; }
.admin-plan-btn { min-width:86px; min-height:32px; padding:6px 9px; border-radius:8px; cursor:pointer; font:800 9px var(--font-main); }
.admin-plan-btn.upgrade { border:1px solid #BFD0FF; background:#EEF3FF; color:#285AD9; }
.admin-plan-btn.downgrade { border:1px solid #E1E6EE; background:#FFFFFF; color:#687386; }
.admin-plan-btn:hover { transform:translateY(-1px); box-shadow:0 5px 12px rgba(42,70,125,.1); }
.admin-plan-btn:disabled { opacity:.5; cursor:wait; transform:none; }
.admin-empty-state { display:grid; min-height:170px; place-items:center; color:#98A2B3; font-size:11px; }
@media (max-width:700px){
  .commercial-modal.pricing-modal { width:min(100% - 18px,520px); max-height:calc(100vh - 18px); }
  .pricing-modal-header { padding:22px 18px 18px; }
  .pricing-modal-header h3 { font-size:21px; }
  .pricing-modal > .plan-comparison,.pricing-modal > .usage-summary,.pricing-modal > .manual-payment-panel,.pricing-modal > .config-notice,.pricing-modal > .pricing-faq { margin-left:16px; margin-right:16px; }
  .pricing-modal > .plan-comparison { margin-top:18px; }
  .plan-comparison { grid-template-columns:1fr; }
  .pricing-card { min-height:0; padding:22px; }
  .pricing-faq-list details>p { padding-right:14px; padding-left:14px; }
  .refund-policy-note { flex-direction:column; gap:5px; }
  .admin-modal { width:calc(100vw - 18px); max-height:calc(100vh - 18px); }
  .admin-modal>.modal-header,.admin-panel { padding-right:17px; padding-left:17px; }
  .admin-tabs { padding-right:17px; padding-left:17px; }
  .admin-user-toolbar { align-items:stretch; flex-direction:column; }
  .admin-user-toolbar input { width:100%; }
  .admin-user-item { grid-template-columns:38px minmax(0,1fr) 68px; }
  .admin-user-date { grid-column:2/3; }
  .admin-user-actions { grid-column:3/4; grid-row:2; }
}
.membership-locked { opacity:.58; position:relative; cursor:not-allowed; }
.membership-locked::after { content:'PRO'; position:absolute; right:10px; top:10px; padding:3px 7px; border-radius:999px; background:#2C68FB; color:#fff; font-size:10px; font-weight:800; }

.field-row {
  display: flex;
  gap: 12px;
}

.field-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-col label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

/* Voice Box */
.voice-selection-box {
  background: rgba(0, 0, 0, 0.25);
  padding: 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.voice-preview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.btn-preview-voice {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(99, 102, 241, 0.2));
  border: 1px solid rgba(6, 182, 212, 0.4);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.btn-preview-voice:hover {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.35), rgba(99, 102, 241, 0.35));
  transform: translateY(-1px);
}

.voice-tag-info {
  font-size: 12px;
  color: var(--text-muted);
}

/* Audio Mode Box */
.audio-mode-box {
  background: rgba(0, 0, 0, 0.25);
  padding: 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
}

.box-title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 10px;
}

.radio-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.radio-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
}

.radio-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(99, 102, 241, 0.4);
}

.radio-card.active {
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.1);
}

.radio-card input[type="radio"] {
  accent-color: var(--primary);
  margin-top: 3px;
  width: 16px;
  height: 16px;
}

.radio-info strong {
  display: block;
  font-size: 13px;
  color: var(--text-main);
}

.radio-info small {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkbox-list label, .control-row label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-muted);
}

.checkbox-list input[type="checkbox"], .control-row input[type="checkbox"] {
  accent-color: var(--primary);
  width: 16px;
  height: 16px;
}

/* Render Button */
.render-action-card {
  margin-top: 10px;
}

.btn-render {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 18px 24px;
  background: linear-gradient(135deg, #4f46e5, #9333ea);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-lg);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(126, 34, 206, 0.4);
  transition: all 0.3s ease;
}

.btn-render:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(126, 34, 206, 0.6);
  background: linear-gradient(135deg, #4338ca, #7e22ce);
}

.render-icon {
  font-size: 32px;
}

.render-text {
  text-align: left;
}

.render-text strong {
  display: block;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.render-text small {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}

/* Preview Panel */
.preview-panel {
  position: sticky;
  top: 20px;
}

.preview-card {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.card-header h2 {
  font-size: 16px;
  font-weight: 700;
}

.preview-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-mute-toggle {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-mute-toggle.unmuted {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.3);
  color: #34d399;
}

.aspect-badge {
  font-size: 12px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
  padding: 4px 10px;
  border-radius: 6px;
  color: var(--accent);
}

/* Phone Viewport (9:16) */
.phone-viewport {
  width: 320px;
  height: 568px;
  background: #000;
  border-radius: 28px;
  border: 8px solid #2d3748;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

.video-container {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #05070a;
}

#mainVideoPlayer {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.preview-fullscreen-btn { position:absolute; right:8px; bottom:38px; z-index:20; width:30px; height:30px; border:1px solid rgba(255,255,255,.35); border-radius:8px; background:rgba(0,0,0,.68); color:#fff; font-size:18px; cursor:pointer; }
.preview-player-controls { position:absolute; z-index:19; left:7px; right:7px; bottom:6px; height:28px; display:flex; align-items:center; gap:6px; padding:0 7px; border-radius:8px; background:linear-gradient(90deg,rgba(2,6,23,.9),rgba(15,23,42,.82)); color:#fff; font-size:9px; opacity:.92; }
.preview-player-controls button { border:0; background:transparent; color:#fff; cursor:pointer; padding:2px; font-size:11px; }
.preview-player-controls input[type="range"] { flex:1; min-width:0; height:3px; accent-color:#22d3ee; cursor:pointer; }
.video-container:fullscreen .preview-player-controls { left:3%; right:3%; bottom:18px; height:48px; padding:0 18px; gap:14px; font-size:14px; }
.video-container:fullscreen .preview-player-controls button { font-size:18px; }
.video-container:fullscreen .preview-fullscreen-btn { bottom:76px; right:3%; }
.video-container:fullscreen { width:100vw; height:100vh; background:#000; }
.video-container:fullscreen #mainVideoPlayer { width:100%; height:100%; object-fit:contain; }
.video-container:fullscreen .caption-preview-overlay { font-size:clamp(20px,3.2vw,58px) !important; max-width:86%; }
.video-container:fullscreen .cta-banner-overlay { font-size:clamp(14px,1.5vw,28px); left:10%; right:10%; }

/* Blur Guide Box Overlay */
.blur-overlay-box {
  position: absolute;
  left: 0;
  width: 100%;
  height: 20%;
  top: 72%;
  background: rgba(6, 182, 212, 0.25);
  backdrop-filter: none;
  border-top: 2px dashed #06b6d4;
  border-bottom: 2px dashed #06b6d4;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  cursor: move;
  touch-action: none;
  user-select: none;
  transition: all 0.15s ease;
  z-index: 10;
}
.blur-overlay-box.dragging { transition:none; border-style:solid; }
.blur-resize-handle { position:absolute; right:-7px; bottom:-7px; width:20px; height:20px; border-radius:50%; background:#2C68FB; color:#fff; display:grid; place-items:center; font-size:11px; cursor:nwse-resize; box-shadow:0 2px 7px rgba(0,0,0,.3); }

.blur-tag {
  font-size: 10px;
  background: rgba(0, 0, 0, 0.8);
  color: #06b6d4;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
}

/* CTA Banner Overlay */
.cta-banner-overlay {
  position: absolute;
  top: 18px;
  left: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  padding: 6px 10px;
  border-radius: 8px;
  z-index: 12;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

/* Caption Overlay */
.caption-preview-overlay {
  position: absolute;
  left: 50%;
  top: 80%;
  width: max-content;
  max-width: 92%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.85);
  z-index: 12;
  line-height: 1.15;
  cursor: grab;
  user-select: none;
  touch-action: none;
  pointer-events: auto;
  padding: 8px;
}

.caption-preview-overlay.dragging { cursor: grabbing; outline: 1px dashed #22d3ee; border-radius: 6px; }
.caption-drag-hint { position:absolute; left:50%; bottom:8px; transform:translateX(-50%); z-index:13; font-size:9px; color:#67e8f9; background:rgba(0,0,0,.68); padding:3px 7px; border-radius:10px; pointer-events:none; }

.trim-editor { margin-top:14px; padding:16px; border:1px solid rgba(139,92,246,.35); border-radius:14px; background:linear-gradient(145deg,rgba(17,24,39,.92),rgba(30,27,75,.35)); box-shadow:inset 0 1px rgba(255,255,255,.04); }
.source-permission-note { margin:7px 2px 0; color:var(--text-muted); font-size:10px; }
.social-import-status { margin-top:10px; padding:11px 13px; border:1px solid #dbe5ff; border-radius:10px; background:#f8faff; color:#36507a; font-size:11px; line-height:1.55; }
.social-import-status.working { border-color:#bfdbfe; background:#eff6ff; color:#1d4ed8; }
.social-import-status.success { border-color:#bbf7d0; background:#f0fdf4; color:#15803d; }
.social-import-status.warning { border-color:#fde68a; background:#fffbeb; color:#92400e; }
.social-import-status.error { border-color:#fecaca; background:#fef2f2; color:#b91c1c; }
.video-template-box { margin-top:14px; padding:16px; border:1px solid rgba(34,211,238,.24); border-radius:14px; background:linear-gradient(145deg,rgba(8,15,30,.94),rgba(17,24,39,.72)); }
.template-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.template-heading div { display:flex; flex-direction:column; gap:3px; }.template-heading small { color:var(--text-muted); font-size:10px; }
.template-heading>span { flex:0 0 auto; color:#67e8f9; font-size:10px; padding:5px 8px; border-radius:999px; background:rgba(6,182,212,.12); }
.video-template-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:13px; }
.video-template-card { min-width:0; padding:7px; border:1px solid rgba(148,163,184,.16); border-radius:10px; background:rgba(15,23,42,.74); color:#e5e7eb; cursor:pointer; display:flex; flex-direction:column; gap:3px; text-align:left; }
.video-template-card:hover { transform:translateY(-1px); border-color:#6366f1; }.video-template-card.selected { border-color:#67e8f9; box-shadow:0 0 0 2px rgba(34,211,238,.14); background:rgba(8,47,73,.45); }
.video-template-card b { font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.video-template-card small { font-size:8px; color:#94a3b8; }
.tpl-preview { display:block; width:100%; height:45px; border-radius:6px; border:1px solid rgba(255,255,255,.12); background:#111; position:relative; overflow:hidden; }
.tpl-preview:after { content:''; position:absolute; left:9%; right:9%; bottom:5px; height:4px; border-radius:2px; background:#fde047; box-shadow:0 -8px rgba(255,255,255,.8); }
.tpl-full { background:linear-gradient(135deg,#475569,#111827); }.tpl-hook { background:linear-gradient(#050505 0 27%,#785f52 27%); }.tpl-product { background:linear-gradient(#f2d39b 0 24%,#fff 24% 37%,#9a6b45 37% 78%,#fff 78%); }.tpl-beauty { background:linear-gradient(#fbcfe8 0 25%,#bd718c 25%); }.tpl-food { background:linear-gradient(#fef3c7 0 28%,#c47b2c 28% 82%,#fff7ed 82%); }.tpl-news { background:linear-gradient(#172554 0 23%,#64748b 23%); }.tpl-sale { background:linear-gradient(#b91c1c 0 27%,#292524 27%); }.tpl-minimal { background:linear-gradient(#fff 0 22%,#d6d3d1 22% 82%,#fff 82%); }
.tpl-social { background:linear-gradient(#fff 0 30%,#67d7df 30% 78%,#fff 78%); }.tpl-cinema { background:linear-gradient(#050505 0 22%,#6b7280 22% 78%,#050505 78%); }
.template-text-controls { display:grid; grid-template-columns:minmax(0,1fr) 76px; gap:9px; }.template-text-controls .template-title-input { grid-column:1/-1; }.template-text-controls .color-field input { min-height:42px; }.template-move-guide { display:block; margin-top:9px; color:#67e8f9; font-size:9px; }
.template-hook-ai-row { grid-column:1/-1; display:flex; align-items:center; gap:10px; padding:9px 10px; border:1px solid #dbe5ff; border-radius:10px; background:#f8faff; }
.template-hook-ai-row button { flex:0 0 auto; min-height:36px; padding:8px 12px; border:0; border-radius:9px; color:#fff; background:#2C68FB; font-size:10px; font-weight:850; cursor:pointer; box-shadow:0 6px 14px rgba(44,104,251,.18); }
.template-hook-ai-row button:hover:not(:disabled) { background:#2458d8; transform:translateY(-1px); }.template-hook-ai-row button:disabled { opacity:.55; cursor:not-allowed; box-shadow:none; }
.template-hook-ai-row small { min-width:0; color:#6b7280; font-size:9px; line-height:1.45; }.template-hook-ai-row small.success { color:#15803d; }.template-hook-ai-row small.error { color:#dc2626; }
.template-title-line-box { margin-top:10px; padding:10px; border:1px solid #dbe5ff; border-radius:10px; background:#f8faff; }
.template-title-line-heading { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:8px; }.template-title-line-heading strong { color:#1f45b8; font-size:11px; }.template-title-line-heading small { color:#6b7280; font-size:9px; }
.template-title-line-controls { display:grid; grid-template-columns:minmax(0,1fr) 76px minmax(0,1fr) 76px; gap:8px; }.template-title-line-controls .color-field input { min-height:42px; }
.template-size-controls { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
.template-video-controls { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:end; margin-top:12px; padding-top:12px; border-top:1px solid rgba(148,163,184,.13); }
.layout-title-preview { display:none; position:absolute; z-index:11; top:0; left:0; right:0; height:24%; padding:28px 14px 8px; flex-direction:column; align-items:center; justify-content:center; text-align:center; font-family:'Pretendard Local',sans-serif; font-size:23px; line-height:1.12; font-weight:900; white-space:normal; overflow:hidden; }
.layout-title-line { display:block; width:100%; white-space:nowrap; line-height:1.12; }
.layout-bottom-preview { display:none; position:absolute; z-index:14; left:50%; top:88%; transform:translate(-50%,-50%); width:90%; padding:7px 10px; text-align:center; font-family:'Pretendard Local',sans-serif; font-weight:800; font-size:13px; line-height:1.2; white-space:pre-line; cursor:grab; user-select:none; touch-action:none; text-shadow:0 1px 0 rgba(0,0,0,.45); -webkit-font-smoothing:antialiased; }
.video-container.layout-framed { background:var(--layout-bg,#000); }.video-container.layout-framed .layout-title-preview { display:flex; color:var(--layout-title,#fff); cursor:grab; user-select:none; touch-action:none; }.video-container.layout-framed .layout-bottom-preview { display:block; }
.layout-title-preview.layout-text-dragging,.layout-bottom-preview.layout-text-dragging { outline:2px dashed #22d3ee; outline-offset:2px; cursor:grabbing!important; }
.video-container.layout-framed #mainVideoPlayer { position:absolute; left:0; top:var(--layout-video-top,24%); width:100%; height:var(--layout-video-height,76%); object-fit:cover; }
.video-container.layout-framed #mainVideoPlayer { cursor:grab; touch-action:none; user-select:none; }.video-container.layout-framed #mainVideoPlayer.template-video-dragging { cursor:grabbing; outline:2px dashed #22d3ee; outline-offset:-2px; }
.video-container.layout-product_clean #mainVideoPlayer,.video-container.layout-food_cream #mainVideoPlayer,.video-container.layout-minimal_white #mainVideoPlayer { height:62%; }
.video-container.layout-hook_black { --layout-bg:#050505;--layout-title:#ffe000;--layout-video-top:27%;--layout-video-height:73%; }.video-container.layout-product_clean { --layout-bg:#fff7ed;--layout-title:#171717;--layout-video-top:29%; }.video-container.layout-beauty_pink { --layout-bg:#fce7f3;--layout-title:#831843;--layout-video-top:25%;--layout-video-height:75%; }.video-container.layout-food_cream { --layout-bg:#fffbeb;--layout-title:#78350f;--layout-video-top:28%; }.video-container.layout-news_navy { --layout-bg:#172554;--layout-title:#fff;--layout-video-top:23%;--layout-video-height:77%; }.video-container.layout-sale_red { --layout-bg:#991b1b;--layout-title:#fff;--layout-video-top:27%;--layout-video-height:73%; }.video-container.layout-minimal_white { --layout-bg:#fff;--layout-title:#111827;--layout-video-top:22%; }
.video-container.layout-social_story { --layout-bg:#fff;--layout-title:#111;--layout-video-top:31%;--layout-video-height:54%; }.video-container.layout-cinema_black { --layout-bg:#050505;--layout-title:#fff;--layout-video-top:22%;--layout-video-height:58%; }
.trim-header, .trim-values { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.trim-header span, .trim-editor small { color:var(--text-muted); font-size:11px; }
.timeline-header-actions { display:flex; align-items:center; justify-content:flex-end; gap:9px; }
.btn-add-timeline-video { border:1px solid #B9CAFF; border-radius:9px; background:#EEF3FF; color:#2C68FB; padding:7px 11px; font-size:11px; font-weight:800; cursor:pointer; white-space:nowrap; }
.btn-add-timeline-video:hover { background:#DDE7FF; border-color:#7397FF; }
.btn-add-timeline-video:disabled { opacity:.45; cursor:not-allowed; }
.btn-sync-timeline-script { border:1px solid #9BB5FF; border-radius:9px; background:#4F7CFF; color:#FFFFFF; padding:7px 11px; font-size:11px; font-weight:850; cursor:pointer; white-space:nowrap; box-shadow:0 5px 12px rgba(79,124,255,.2); }
.btn-sync-timeline-script:hover { background:#3D68E8; }
.btn-sync-timeline-script.needs-sync { animation:timeline-sync-pulse 1.5s ease-in-out infinite; }
.btn-sync-timeline-script:disabled { opacity:.55; cursor:wait; animation:none; }
@keyframes timeline-sync-pulse { 50% { box-shadow:0 0 0 5px rgba(79,124,255,.14); } }
.timeline-source-list { display:flex; gap:8px; overflow-x:auto; min-height:0; margin:10px 0; }
.timeline-source-list:empty { display:none; }
.timeline-source-card { flex:0 0 auto; max-width:190px; display:flex; align-items:center; gap:7px; padding:7px 9px; border:1px solid #D7E0F2; border-radius:10px; background:#FFFFFF; color:#46536A; cursor:pointer; }
.timeline-source-card.active { border-color:#4F7CFF; background:#EEF3FF; box-shadow:0 0 0 2px rgba(79,124,255,.12); }
.timeline-source-card b { display:grid; place-items:center; flex:0 0 24px; height:24px; border-radius:7px; background:#DDE7FF; color:#2C68FB; font-size:10px; }
.timeline-source-card span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; font-weight:700; }
.timeline-source-card small { color:#7B879A; white-space:nowrap; }
.timeline-source-remove { flex:0 0 20px; width:20px; height:20px; padding:0; border:0; border-radius:50%; background:#F3F5F9; color:#7B879A; cursor:pointer; line-height:20px; }
.timeline-source-remove:hover { background:#FEE2E2; color:#EF4444; }
.timeline-clip-source { position:absolute; right:4px; top:4px; z-index:3; min-width:21px; padding:2px 4px; border-radius:5px; background:rgba(9,18,43,.8); color:#fff; font-size:8px; text-align:center; }
.filmstrip-timeline { position:relative; height:88px; margin:14px 0 10px; border-radius:10px; overflow:hidden; background:#090b12; border:1px solid rgba(255,255,255,.12); cursor:crosshair; }
.timeline-thumbnails { position:absolute; inset:0; display:flex; }
.timeline-thumbnails img, .timeline-thumb-placeholder { height:100%; flex:1 1 0; min-width:0; object-fit:cover; opacity:.8; border-right:1px solid rgba(255,255,255,.08); }
.timeline-clip-frames { position:absolute; inset:0; display:flex; overflow:hidden; }
.timeline-clip-frames span { flex:1 1 0; min-width:0; background-position:center; background-size:cover; border-right:1px solid rgba(255,255,255,.14); }
.timeline-clip-label { position:relative; z-index:2; padding:2px 4px; border-radius:4px; background:rgba(2,6,23,.62); color:#fff; }
.timeline-dim { position:absolute; top:0; bottom:0; background:rgba(0,0,0,.68); z-index:2; pointer-events:none; }
.timeline-dim-left { left:0; width:0; }.timeline-dim-right { right:0; width:0; }
.timeline-selection { position:absolute; top:0; bottom:0; left:0; right:0; z-index:3; border-top:2px solid #a78bfa; border-bottom:2px solid #a78bfa; pointer-events:none; }
.timeline-handle { position:absolute; top:0; bottom:0; width:14px; z-index:7; border:0; background:#8b5cf6; cursor:ew-resize; padding:0; box-shadow:0 0 14px rgba(139,92,246,.65); }
.timeline-handle::after { content:'⋮'; color:#fff; font-weight:900; }.timeline-handle.start { left:0; border-radius:8px 0 0 8px; }.timeline-handle.end { right:0; border-radius:0 8px 8px 0; }
.timeline-playhead { position:absolute; top:0; bottom:0; left:0; width:2px; background:#22d3ee; z-index:8; pointer-events:none; box-shadow:0 0 8px #22d3ee; }
.timeline-playhead span { position:absolute; top:0; left:50%; transform:translate(-50%,-35%); width:9px; height:9px; background:#22d3ee; border-radius:50%; }
.timeline-scenes { position:absolute; left:0; right:0; bottom:3px; height:18px; z-index:5; pointer-events:none; }
.timeline-scene-block { position:absolute; height:100%; border-radius:3px; background:rgba(250,204,21,.68); border:1px solid #fde047; color:#111827; font-size:8px; font-weight:800; overflow:hidden; padding:2px 3px; white-space:nowrap; }
.timeline-clips { position:absolute; inset:0; z-index:4; }
.timeline-clip-block { position:absolute; top:0; bottom:0; border-radius:4px; background-color:rgba(99,102,241,.68); background-size:cover; background-position:center; border:1px solid #818cf8; color:white; font-size:9px; font-weight:900; overflow:hidden; padding:5px 6px; white-space:nowrap; cursor:pointer; box-shadow:inset 0 -20px 25px rgba(2,6,23,.42); }
.timeline-clip-block.selected { background:rgba(34,211,238,.85); border-color:#a5f3fc; color:#082f49; box-shadow:0 0 10px rgba(34,211,238,.65); }
.timeline-clip-block[draggable="true"] { cursor:grab; }
.timeline-clip-block.dragging { opacity:.42; cursor:grabbing; outline:2px dashed #67e8f9; }
.timeline-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.timeline-actions { display:flex; gap:5px; }
#playheadTimeLabel { color:#67e8f9; font:700 12px monospace; }
.btn-split-scene { border:1px solid rgba(34,211,238,.35); background:rgba(34,211,238,.1); color:#67e8f9; border-radius:7px; padding:6px 10px; cursor:pointer; font-size:11px; font-weight:700; }
.btn-timeline-point { border:1px solid rgba(167,139,250,.32); background:rgba(139,92,246,.1); color:#c4b5fd; border-radius:7px; padding:6px 8px; cursor:pointer; font-size:10px; }
.clip-edit-toolbar { display:flex; align-items:center; gap:5px; margin:8px 0; padding:8px; border-radius:9px; background:rgba(2,6,23,.5); border:1px solid rgba(99,102,241,.16); }
.clip-edit-toolbar span { margin-right:auto; color:#a5b4fc; font-size:10px; font-weight:800; }
.clip-edit-toolbar button { border:1px solid rgba(148,163,184,.18); background:rgba(30,41,59,.72); color:#cbd5e1; padding:5px 7px; border-radius:6px; font-size:10px; cursor:pointer; }
.clip-edit-toolbar button:hover { color:white; border-color:#6366f1; background:rgba(79,70,229,.25); }
.clip-sequence { display:flex; gap:5px; overflow-x:auto; padding:2px 0 7px; }
.clip-sequence button { flex:0 0 auto; border:1px solid rgba(99,102,241,.25); background:rgba(30,27,75,.45); color:#a5b4fc; border-radius:7px; padding:5px 8px; font-size:9px; cursor:pointer; }
.clip-sequence button.selected { color:#083344; background:#67e8f9; border-color:#a5f3fc; font-weight:900; }
.scene-time-controls { display:flex; gap:8px; align-items:center; width:100%; margin-top:2px; padding:8px 10px; border-radius:9px; background:rgba(2,6,23,.5); border:1px solid rgba(148,163,184,.12); }
.scene-time-controls::before { content:'TIMING'; color:#8b5cf6; font-size:9px; font-weight:900; letter-spacing:.8px; }
.scene-time-controls label { display:flex; gap:5px; align-items:center; font-size:10px; color:#94a3b8; }
.scene-time-controls input { width:58px; padding:4px 6px; font:700 11px monospace; color:#e2e8f0; text-align:center; border-radius:6px; background:#0f172a; border:1px solid rgba(139,92,246,.25); }
.scene-time-controls input::-webkit-inner-spin-button { opacity:.25; }
.scene-time-arrow { color:#475569; font-size:11px; }
.btn-jump-scene { margin-left:auto; padding:5px 9px; font-size:10px; border-radius:7px; border:1px solid rgba(34,211,238,.25); background:rgba(34,211,238,.08); color:#67e8f9; cursor:pointer; }
.auto-analyze-toggle { display:flex; gap:9px; align-items:flex-start; margin-top:10px; padding:10px 12px; border-radius:10px; border:1px solid rgba(34,211,238,.2); background:rgba(34,211,238,.055); cursor:pointer; }
.auto-analyze-toggle input { margin-top:3px; accent-color:#22d3ee; }.auto-analyze-toggle span { display:flex; flex-direction:column; gap:2px; }.auto-analyze-toggle strong { color:#c7f9ff; font-size:12px; }.auto-analyze-toggle small { color:#64748b; font-size:10px; }
.ai-provider-status { margin-top:8px; font-size:11px; color:#94a3b8; }
.ai-provider-status.connected { color:#34d399; }.ai-provider-status.fallback { color:#fbbf24; }
.persona-row { margin-top:10px; }

.video-meta-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-muted);
}

/* Progress Bar */
.progress-container {
  width: 100%;
  margin-top: 20px;
  background: rgba(0, 0, 0, 0.3);
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}

.progress-header {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}

.progress-bar-bg {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #06b6d4);
  transition: width 0.3s ease;
  box-shadow: 0 0 10px var(--accent);
}

/* Result Box */
.result-action-box {
  width: 100%;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.success-banner {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34d399;
  font-size: 13px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  text-align: center;
}

.btn-download {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  font-weight: 700;
  padding: 14px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35);
  transition: all 0.2s ease;
}

.btn-download:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal-window {
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  background: #131926;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 24px;
  cursor: pointer;
}

.modal-body {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}

.history-info strong {
  display: block;
  font-size: 13px;
}

.history-info small {
  color: var(--text-dim);
  font-size: 11px;
}

.hidden {
  display: none !important;
}
@font-face { font-family:'Pretendard Local'; src:url('fonts/Pretendard-Bold.otf') format('opentype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Black Han Sans Local'; src:url('fonts/BlackHanSans-Regular.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Do Hyeon Local'; src:url('fonts/DoHyeon-Regular.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Jua Local'; src:url('fonts/Jua-Regular.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Nanum Gothic Local'; src:url('fonts/NanumGothic-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Nanum Myeongjo Local'; src:url('fonts/NanumMyeongjo-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Cafe24 Danjunghae Local'; src:url('fonts/Cafe24Danjunghae-v2.0.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }

/* ─────────────────────────────────────────────────────────────
   Bright workspace theme
   영상 자체와 타임라인은 정확한 색 확인을 위해 어둡게 유지하고,
   나머지 편집 UI는 밝고 선명한 SaaS 스타일로 구성한다.
   ───────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;
  --bg-main:#F7F9FC;
  --bg-card:#FFFFFF;
  --bg-card-hover:#ffffff;
  --border-color:#E3E9F3;
  --border-focus:rgba(79,124,255,.55);
  --primary:#2C68FB;
  --primary-hover:#1F55D9;
  --primary-glow:rgba(44,104,251,.20);
  --accent:#2C68FB;
  --accent-purple:#2C68FB;
  --success:#22C55E;
  --danger:#EF4444;
  --text-main:#1F2937;
  --text-muted:#6B7280;
  --text-dim:#9CA3AF;
}
body {
  background-color:var(--bg-main);
  background-image:linear-gradient(180deg,#FFFFFF 0,#F7F9FC 42%,#F3F6FB 100%);
}
.app-header,.step-card,.preview-card,.modal-window {
  background:rgba(255,255,255,.94);
  border-color:#e2e5ec;
  box-shadow:0 10px 28px rgba(24,32,51,.075);
}
.app-header { backdrop-filter:blur(20px); }
.step-card:hover { background:#fff; border-color:#d1d5df; box-shadow:0 12px 28px rgba(24,32,51,.085); }
.step-card.active { border-color:#9AB4FF; box-shadow:0 0 0 3px rgba(79,124,255,.08),0 12px 28px rgba(31,41,55,.07); }
input[type="text"],input[type="number"],select,textarea {
  background:#fff;
  border-color:#d8deed;
  color:#1f2937;
  box-shadow:0 1px 2px rgba(30,41,59,.03);
}
input[type="text"]::placeholder,textarea::placeholder { color:#a2aabd; }
input[type="color"] { background:#fff; border-color:#d8deed; }
.drop-zone { background:#fafbff; border-color:#bfc7dc; color:#566179; }
.drop-zone:hover,.drop-zone.drag-over { background:#EEF3FF; border-color:#2C68FB; }
.divider::before,.divider::after { background:#dfe4ef; }.divider span { color:#8b95aa; }
.voice-selection-box,.audio-mode-box,.subtitle-style-box {
  background:#f8f9fe;
  border-color:#dfe4f2;
}
.radio-card { background:#fff; border-color:#dfe4ed; }
.radio-card:hover { background:#F7FAFF; border-color:#AFC3FF; }
.radio-card.active { background:#EEF3FF; border-color:#2C68FB; }
.script-editor-list { scrollbar-color:#c5cbe0 transparent; }
.script-line-item {
  background:linear-gradient(135deg,#FFFFFF,#F7FAFF);
  border-color:#dde2f0;
  box-shadow:0 4px 12px rgba(76,83,120,.05);
}
.script-line-item:focus-within { background:#F7FAFF; border-color:#7FA0FF; }
.line-badge { background:#EEF3FF; color:#2C68FB; }
.scene-time-controls { background:#f3f5fb; border-color:#dce1ee; }
.scene-time-controls input { background:#fff; color:#374151; border-color:#C7D5FF; }
.scene-time-controls label { color:#657089; }.scene-time-arrow { color:#9ca3b5; }
.scene-drag-handle { background:#EEF3FF; color:#2C68FB; border-color:#C7D5FF; }
.auto-analyze-toggle { background:#EEF3FF; border-color:#D3DFFF; }
.auto-analyze-toggle strong { color:#2C68FB; }.auto-analyze-toggle small,.ai-provider-status { color:#6B7280; }
.trim-editor {
  background:linear-gradient(145deg,#F8FAFF,#EEF3FF);
  border-color:#C7D5FF;
  box-shadow:inset 0 1px #fff,0 8px 20px rgba(79,124,255,.07);
}
.video-template-box {
  background:#FAFCFF;
  border-color:#D9E3FA;
  box-shadow:0 8px 20px rgba(79,124,255,.05);
}
.template-heading>span { color:#2C68FB; background:#EEF3FF; }
.video-template-card { background:#fff; color:#263247; border-color:#dce2ef; }
.video-template-card:hover { border-color:#7FA0FF; }.video-template-card.selected { background:#EEF3FF; border-color:#2C68FB; box-shadow:0 0 0 2px rgba(44,104,251,.12); }
.video-template-card small { color:#7a8499; }.template-move-guide { color:#2C68FB; }
.clip-edit-toolbar { background:#f5f6fb; border-color:#dce1ee; }
.clip-edit-toolbar span { color:#2C68FB; }
.clip-edit-toolbar button { background:#fff; color:#536078; border-color:#d5dbe8; }
.clip-edit-toolbar button:hover { color:#2F5FDE; background:#EEF3FF; border-color:#7FA0FF; }
.clip-sequence button { background:#EEF3FF; color:#2C68FB; border-color:#C7D5FF; }
.clip-sequence button.selected { background:#DDE7FF; color:#244FC7; border-color:#7397FF; }
.btn-timeline-point { background:#EEF3FF; color:#2C68FB; border-color:#C7D5FF; }
.btn-split-scene { background:#EEF3FF; color:#2C68FB; border-color:#C7D5FF; }
#playheadTimeLabel { color:#2C68FB; }
.btn-secondary { background:#fff; color:#465168; border-color:#d4daea; }
.btn-secondary:hover { background:#EEF3FF; }
.render-action-card { box-shadow:0 14px 32px rgba(79,124,255,.18); }
.video-meta-box,.progress-container { background:#f5f7fc; border-color:#dfe4ef; }
.progress-header { color:#4b5568; }
.modal-overlay { background:rgba(41,48,72,.42); backdrop-filter:blur(5px); }
.modal-header { border-color:#e1e5ef; }.modal-body { color:#283349; }
.history-item { background:#f7f8fc; border-color:#e0e4ee; }
.auth-user-card { background:#f7f8fc; border-color:#dfe4ee; }.auth-user-card button { background:#fff; color:#4b5568; border-color:#d3d9e7; }
.pricing-card { background:#EEF3FF; border-color:#9AB4FF; }
.btn-ai-line { background:#EEF3FF; color:#2C68FB; border-color:#B7CAFF; }
.status-badge { background:#eafaf4; border-color:#bdebd9; }
.removal-mode-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
#dashboardPrecisionUsage { font-size:16px; line-height:1.5; overflow-wrap:anywhere; }
.removal-mode-card { position:relative; display:flex; min-width:0; min-height:100px; flex-direction:column; gap:5px; padding:13px; border:1px solid #dfe3ec; border-radius:12px; background:#fff; cursor:pointer; transition:.18s ease; }
.removal-mode-card input { position:absolute; opacity:0; pointer-events:none; }.removal-mode-card strong { color:#263247; font-size:12px; }.removal-mode-card small { color:#758096; font-size:9px; line-height:1.55; }
.removal-mode-card:hover { transform:translateY(-1px); border-color:#9AB4FF; }.removal-mode-card.selected { border-color:#2C68FB; background:#EEF3FF; box-shadow:0 0 0 2px rgba(44,104,251,.1); }
.removal-mode-card.precision.selected { border-color:#2C68FB; background:#EEF3FF; }
.precision-credit-notice { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid #C7D5FF; border-radius:9px; background:#EEF3FF; }.precision-credit-notice strong { color:#2C68FB; font-size:11px; }.precision-credit-notice span { color:#60709A; font-size:9px; }
.logo-icon { background:#EEF3FF; border:1px solid #D7E2FF; }
.brand-text h1 span { background:#2C68FB; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.btn-preview-voice { background:#EEF3FF; border-color:#C7D5FF; color:#2C68FB; }
.btn-preview-voice:hover { background:#DDE7FF; }

/* 핵심 실행 버튼은 하나의 브랜드 블루로 통일한다. */
.btn-primary,.btn-accent,.btn-render {
  background:#2C68FB;
  color:#FFFFFF;
  border-color:#2C68FB;
  box-shadow:0 6px 16px rgba(79,124,255,.24);
}
.btn-primary:hover,.btn-accent:hover,.btn-render:hover {
  background:#1F55D9;
  border-color:#1F55D9;
  box-shadow:0 9px 22px rgba(61,104,232,.30);
}
.btn-add-scene {
  background:#EEF3FF;
  border-color:#C7D5FF;
  color:#2C68FB;
}
.status-badge.connected,.ai-provider-status.connected { color:#15803D; }
.ai-provider-status.fallback { color:#DC2626; }

/* Autorabbit 심볼에서 추출한 대표색 #2C68FB로 편집기 내부 강조색까지 통일 */
.progress-bar-fill { background:#2C68FB; box-shadow:0 0 10px rgba(44,104,251,.42); }
.preview-player-controls input[type="range"],.auto-analyze-toggle input { accent-color:#2C68FB; }
.blur-overlay-box { background:rgba(44,104,251,.20); border-color:#2C68FB; }
.blur-tag,.caption-drag-hint,.template-move-guide { color:#2C68FB; }
.caption-preview-overlay.dragging,
.layout-title-preview.layout-text-dragging,
.layout-bottom-preview.layout-text-dragging,
.video-container.layout-framed #mainVideoPlayer.template-video-dragging { outline-color:#2C68FB; }
.timeline-selection { border-color:#2C68FB; }
.timeline-handle { background:#2C68FB; box-shadow:0 0 14px rgba(44,104,251,.55); }
.timeline-playhead,.timeline-playhead span { background:#2C68FB; }
.timeline-playhead { box-shadow:0 0 8px #2C68FB; }
.timeline-clip-block { background-color:rgba(44,104,251,.68); border-color:#6E95FF; }
.timeline-clip-block.selected { background:rgba(44,104,251,.88); border-color:#AFC4FF; color:#FFFFFF; box-shadow:0 0 10px rgba(44,104,251,.55); }
.timeline-clip-block.dragging,.script-line-item.scene-drop-target { outline-color:#2C68FB; }
.scene-time-controls::before,.btn-jump-scene { color:#2C68FB; }
.btn-jump-scene { border-color:rgba(44,104,251,.28); background:rgba(44,104,251,.08); }
@media (max-width:720px) {
  .video-template-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .template-size-controls,.template-video-controls { grid-template-columns:1fr; }
  .removal-mode-grid { grid-template-columns:1fr; }
}

/* 인기 키워드 → 중국어 검색 → 영상 URL 추출 워크플로 */
.keyword-discovery-card {
  border-color:#C8D7FF;
  background:linear-gradient(145deg,#FFFFFF 0%,#F6F9FF 100%);
}
.keyword-discovery-card .step-header { align-items:flex-start; }
.keyword-step-num { background:#2C68FB; }
.daily-data-badge,.ai-translate-badge {
  margin-left:auto;
  padding:5px 9px;
  border-radius:999px;
  background:#EEF3FF;
  color:#2C68FB;
  border:1px solid #D4E0FF;
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
}
.keyword-workflow-grid {
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:14px;
}
.naver-trend-panel,.keyword-translate-panel {
  min-width:0;
  padding:15px;
  border:1px solid #DDE5F5;
  border-radius:14px;
  background:#FFFFFF;
  box-shadow:0 7px 18px rgba(44,104,251,.045);
}
.keyword-panel-heading {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.keyword-panel-heading strong { display:block; color:#1F2937; font-size:13px; }
.keyword-panel-heading small { display:block; margin-top:3px; color:#7B8495; font-size:10px; }
.naver-trend-panel .keyword-panel-heading strong { color:#159447; }
.keyword-refresh-btn {
  width:30px;
  height:30px;
  border:1px solid #D8E1F2;
  border-radius:9px;
  background:#F8FAFF;
  color:#2C68FB;
  cursor:pointer;
  font-size:18px;
  line-height:1;
}
.keyword-refresh-btn:hover { background:#EEF3FF; border-color:#9AB4FF; transform:rotate(20deg); }
.keyword-refresh-btn:disabled { opacity:.5; cursor:wait; }
.trend-filter-row { display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.trend-filter-row select { flex:1; padding:9px 10px; font-size:11px; }
.trend-filter-row span { color:#7B8495; font-size:9px; white-space:nowrap; }
.naver-trend-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; min-height:164px; }
.keyword-load-error { grid-column:1/-1; align-self:center; padding:14px; color:#B54708; font-size:10px; line-height:1.6; text-align:center; }
.naver-trend-item {
  display:flex;
  align-items:center;
  min-width:0;
  gap:8px;
  padding:8px 9px;
  border:1px solid #E3E8F2;
  border-radius:9px;
  background:#FBFCFF;
  color:#344054;
  cursor:pointer;
  text-align:left;
  transition:.16s ease;
}
.naver-trend-item:hover { border-color:#79A0FF; background:#EEF3FF; transform:translateY(-1px); }
.naver-trend-item b { flex:0 0 18px; color:#2C68FB; font-size:10px; text-align:center; }
.naver-trend-item span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; font-weight:700; }
.trend-skeleton { height:34px; border-radius:9px; background:linear-gradient(90deg,#F1F4F9 25%,#E5ECF8 50%,#F1F4F9 75%); background-size:200% 100%; animation:trend-loading 1.2s infinite; }
@keyframes trend-loading { to { background-position:-200% 0; } }
.naver-datalab-link { display:inline-block; margin-top:11px; color:#667085; font-size:9px; text-decoration:none; }
.naver-datalab-link:hover { color:#2C68FB; text-decoration:underline; }
.keyword-translate-input { display:flex; gap:8px; }
.keyword-translate-input input { min-width:0; }
.keyword-usage { margin:10px 0 4px; color:#315cce; font-size:12px; line-height:1.5; }
.keyword-usage-note { margin:0 0 10px; color:#73809a; font-size:11px; line-height:1.5; }
.keyword-translate-input .btn-primary { padding:10px 13px; font-size:11px; }
.translated-keyword-box { margin-top:11px; padding:11px; border:1px solid #DCE5F8; border-radius:11px; background:#F7FAFF; }
.translated-keyword-box>label { display:block; margin-bottom:6px; color:#667085; font-size:9px; font-weight:700; }
.translated-keyword-row { display:flex; gap:7px; }
.translated-keyword-row input { padding:10px 11px; font-size:12px; font-weight:700; color:#244FC7; }
.keyword-copy-btn { padding:9px 12px; font-size:10px; }
.keyword-variants { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.keyword-variant-chip { padding:5px 8px; border:1px solid #CFDBFA; border-radius:999px; background:#FFFFFF; color:#47618D; cursor:pointer; font-size:9px; }
.keyword-variant-chip:hover { border-color:#2C68FB; color:#2C68FB; }
.platform-search-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:11px; }
.platform-search-actions button { display:flex; align-items:center; justify-content:center; gap:5px; min-width:0; padding:9px 6px; border:1px solid #DCE2ED; border-radius:9px; background:#FFFFFF; color:#344054; cursor:pointer; font-family:inherit; font-size:9px; font-weight:750; }
.platform-search-actions button:hover { background:#EEF3FF; border-color:#79A0FF; color:#244FC7; }
.platform-dot { width:7px; height:7px; border-radius:50%; background:#2C68FB; }
.platform-dot.xhs { background:#FF2442; }.platform-dot.douyin { background:#111827; }.platform-dot.tiktok { background:#25F4EE; box-shadow:2px 0 #FE2C55; }
.keyword-flow-guide { margin-top:10px; padding:8px 10px; border-radius:8px; background:#FFF8E7; color:#806120; font-size:9px; line-height:1.55; }
@media (max-width:900px) {
  .keyword-workflow-grid { grid-template-columns:1fr; }
}
@media (max-width:520px) {
  .keyword-translate-input { flex-direction:column; }
  .platform-search-actions { grid-template-columns:1fr; }
}

/* ─────────────────────────────────────────────────────────────
   Dashboard service shell
   ───────────────────────────────────────────────────────────── */
.dashboard-shell {
  display:grid;
  grid-template-columns:232px minmax(0,1fr);
  min-height:100vh;
  background:#F7F9FC;
}
.app-sidebar {
  position:sticky;
  top:0;
  display:flex;
  flex-direction:column;
  align-self:start;
  height:100vh;
  padding:24px 16px 18px;
  background:#FFFFFF;
  border-right:1px solid #E5EAF2;
  box-shadow:8px 0 30px rgba(31,41,55,.025);
  z-index:30;
}
.sidebar-brand {
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 8px 24px;
  color:#1F2937;
  font-family:var(--font-brand);
  font-size:20px;
  text-decoration:none;
  letter-spacing:-.45px;
}
.sidebar-brand strong { color:#376CFB; }
.sidebar-logo {
  display:grid;
  width:38px;
  height:38px;
  place-items:center;
  border-radius:12px;
  background:#EEF3FF;
  box-shadow:0 5px 16px rgba(55,108,251,.14);
}
.sidebar-logo img { width:31px; height:31px; object-fit:contain; }
.sidebar-nav { display:flex; flex-direction:column; gap:5px; }
.sidebar-nav-item {
  display:grid;
  grid-template-columns:28px 1fr auto;
  align-items:center;
  width:100%;
  min-height:46px;
  padding:9px 12px;
  border:0;
  border-radius:11px;
  background:transparent;
  color:#6B7280;
  cursor:pointer;
  font-family:inherit;
  font-size:14px;
  text-align:left;
  transition:.16s ease;
}
.sidebar-nav-item span { color:#8C97AA; font-size:17px; font-weight:800; }
.sidebar-nav-item b { font-weight:680; }
.sidebar-nav-item em {
  min-width:24px;
  padding:2px 7px;
  border-radius:999px;
  background:#F0F3F8;
  color:#7A8496;
  font-size:10px;
  font-style:normal;
  font-weight:800;
  text-align:center;
}
.sidebar-nav-item:hover { background:#F6F8FC; color:#344054; }
.sidebar-nav-item.active { background:#EEF3FF; color:#244FC7; }
.sidebar-nav-item.active span { color:#376CFB; }
.sidebar-nav-item.active em { background:#FFFFFF; color:#376CFB; }
.sidebar-guide {
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:auto;
  padding:15px;
  border:1px solid #DCE6FF;
  border-radius:14px;
  background:linear-gradient(145deg,#F7FAFF,#EEF3FF);
}
.sidebar-guide span { color:#376CFB; font-size:10px; font-weight:800; }
.sidebar-guide b { color:#344054; font-size:12px; line-height:1.55; }
.sidebar-guide button {
  align-self:flex-start;
  padding:7px 10px;
  border:0;
  border-radius:8px;
  background:#376CFB;
  color:#FFFFFF;
  cursor:pointer;
  font:700 11px var(--font-main);
}
.sidebar-footer { margin:13px 0 0; color:#A2A9B6; font-size:10px; text-align:center; }
.dashboard-shell>.app-layout {
  width:100%;
  min-width:0;
  max-width:none;
  margin:0;
  padding:20px clamp(18px,2.4vw,36px) 44px;
}
.dashboard-shell .app-header {
  min-height:72px;
  margin-bottom:22px;
  padding:12px 18px;
  border-radius:14px;
  box-shadow:0 6px 22px rgba(31,41,55,.055);
}
.page-heading { min-width:190px; }
.page-eyebrow { display:block; margin-bottom:2px; color:#8B95A7; font-size:9px; font-weight:800; letter-spacing:.12em; }
.page-heading h1 { color:#1F2937; font-size:20px; line-height:1.25; letter-spacing:-.45px; }
.page-heading p { margin-top:3px; color:#7B8495; font-size:11px; }
.dashboard-shell .header-actions { gap:8px; }
.dashboard-shell .header-actions button { white-space:nowrap; }
.header-count {
  display:inline-grid;
  min-width:22px;
  height:22px;
  margin-left:4px;
  place-items:center;
  border-radius:999px;
  background:#EEF3FF;
  color:#376CFB;
  font-size:10px;
  font-weight:850;
}
.app-view.hidden { display:none !important; }
.dashboard-view,.content-view { max-width:1460px; margin:0 auto; }
.dashboard-welcome {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:154px;
  padding:26px 30px;
  overflow:hidden;
  border:1px solid #DCE5FA;
  border-radius:18px;
  background:
    radial-gradient(circle at 88% 18%,rgba(255,255,255,.58) 0 55px,transparent 56px),
    linear-gradient(120deg,#376CFB,#5D88FF);
  box-shadow:0 12px 30px rgba(55,108,251,.16);
  color:#FFFFFF;
}
.welcome-kicker { display:block; margin-bottom:7px; color:#DDE7FF; font-size:11px; font-weight:750; }
.dashboard-welcome h2 { max-width:700px; font-size:24px; line-height:1.35; letter-spacing:-.7px; }
.dashboard-welcome p { margin-top:8px; color:#EAF0FF; font-size:13px; }
.dashboard-primary-action {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-width:174px;
  min-height:46px;
  padding:11px 18px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:11px;
  background:#FFFFFF;
  box-shadow:0 8px 20px rgba(28,67,171,.18);
  color:#285AD9;
  cursor:pointer;
  font:800 14px var(--font-main);
}
.dashboard-primary-action:hover { transform:translateY(-1px); box-shadow:0 11px 25px rgba(28,67,171,.23); }
.dashboard-primary-action span { font-size:19px; line-height:1; }
.dashboard-metrics {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:13px;
  margin:16px 0;
}
.metric-card {
  display:flex;
  align-items:center;
  gap:13px;
  min-width:0;
  padding:17px;
  border:1px solid #E1E7F0;
  border-radius:15px;
  background:#FFFFFF;
  box-shadow:0 7px 20px rgba(31,41,55,.045);
}
.metric-icon { display:grid; flex:0 0 40px; width:40px; height:40px; place-items:center; border-radius:12px; font:800 12px var(--font-brand); }
.metric-icon.blue { background:#EEF3FF; color:#376CFB; }
.metric-icon.mint { background:#EAFBF4; color:#159B6C; }
.metric-icon.violet { background:#F2EEFF; color:#7656D8; }
.metric-icon.amber { background:#FFF5E4; color:#C77A12; }
.metric-card div { min-width:0; }
.metric-card small { display:block; color:#8B95A7; font-size:10px; font-weight:700; }
.metric-card strong { display:block; overflow:hidden; margin-top:2px; color:#1F2937; font-size:18px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.metric-card p { overflow:hidden; margin-top:2px; color:#98A1B0; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.dashboard-main-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(280px,.8fr); gap:16px; }
.dashboard-panel {
  border:1px solid #E1E7F0;
  border-radius:17px;
  background:#FFFFFF;
  box-shadow:0 8px 24px rgba(31,41,55,.045);
}
.recent-panel,.quick-panel,.onboarding-panel { padding:20px; }
.dashboard-section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:15px; }
.dashboard-section-heading span { display:block; color:#8A94A7; font-size:9px; font-weight:800; letter-spacing:.08em; }
.dashboard-section-heading h3 { margin-top:2px; color:#253044; font-size:16px; letter-spacing:-.3px; }
.text-action { padding:7px 0; border:0; background:transparent; color:#376CFB; cursor:pointer; font:750 11px var(--font-main); }
.dashboard-recent-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; min-height:174px; }
.quick-action-list { display:flex; flex-direction:column; gap:8px; }
.quick-action-list>button {
  display:grid;
  grid-template-columns:36px 1fr auto;
  align-items:center;
  gap:10px;
  width:100%;
  padding:11px;
  border:1px solid #E4E9F2;
  border-radius:11px;
  background:#FBFCFE;
  color:#344054;
  cursor:pointer;
  font-family:inherit;
  text-align:left;
}
.quick-action-list>button:hover { border-color:#AEC2FA; background:#F5F8FF; transform:translateX(2px); }
.quick-icon { display:grid; width:36px; height:36px; place-items:center; border-radius:10px; background:#EEF3FF; color:#376CFB; font-weight:900; }
.quick-action-list b,.quick-action-list small { display:block; }
.quick-action-list b { font-size:12px; }
.quick-action-list small { margin-top:2px; color:#8B95A7; font-size:9px; }
.quick-action-list em { color:#8FA2CB; font-size:15px; font-style:normal; }
.onboarding-panel { margin-top:16px; }
.onboarding-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; list-style:none; }
.onboarding-steps li { display:flex; gap:12px; padding:14px; border-radius:12px; background:#F8FAFD; }
.onboarding-steps li>span { display:grid; flex:0 0 34px; height:34px; place-items:center; border-radius:10px; background:#EEF3FF; color:#376CFB; font-size:10px; }
.onboarding-steps b { color:#344054; font-size:12px; }
.onboarding-steps p { margin-top:4px; color:#7A8496; font-size:10px; line-height:1.55; }
.content-page-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:20px;
  padding:22px 24px;
  border:1px solid #E1E7F0;
  border-radius:16px;
  background:#FFFFFF;
}
.content-page-heading span { color:#376CFB; font-size:9px; font-weight:850; letter-spacing:.12em; }
.content-page-heading h2 { margin-top:4px; color:#1F2937; font-size:23px; letter-spacing:-.6px; }
.content-page-heading p { margin-top:5px; color:#788295; font-size:12px; }
.content-page-actions { display:flex; gap:8px; flex-shrink:0; }
.library-notice { display:flex; align-items:center; gap:10px; margin-bottom:14px; padding:11px 14px; border:1px solid #DDE6FA; border-radius:11px; background:#F5F8FF; color:#667085; font-size:11px; }
.library-notice b { color:#376CFB; }
.video-library-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; min-height:260px; }
.video-library-card { min-width:0; overflow:hidden; border:1px solid #E1E7F0; border-radius:14px; background:#FFFFFF; box-shadow:0 7px 22px rgba(31,41,55,.05); }
.video-library-card.compact { box-shadow:none; }
.video-library-preview { position:relative; aspect-ratio:9/16; overflow:hidden; background:#090D15; }
.video-library-preview video { display:block; width:100%; height:100%; object-fit:contain; background:#090D15; }
.video-library-preview>span { position:absolute; top:8px; left:8px; padding:4px 7px; border-radius:999px; background:rgba(10,15,26,.72); color:#FFFFFF; font-size:8px; font-weight:800; }
.video-card-play { position:absolute; top:50%; left:50%; display:grid; width:38px; height:38px; padding-left:2px; place-items:center; transform:translate(-50%,-50%); border:1px solid rgba(255,255,255,.8); border-radius:50%; background:rgba(255,255,255,.92); box-shadow:0 5px 16px rgba(0,0,0,.18); color:#2C68FB; cursor:pointer; font-size:13px; }
.video-card-play:hover { transform:translate(-50%,-50%) scale(1.06); }
.video-library-copy { padding:12px; }
.video-library-copy>strong { display:block; overflow:hidden; color:#344054; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.video-library-copy>small { display:block; overflow:hidden; margin-top:5px; color:#9099A8; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.video-card-actions { display:flex; align-items:center; gap:6px; margin-top:10px; }
.video-card-actions a,.video-card-actions button { padding:7px 10px; border:1px solid #DCE3EF; border-radius:8px; background:#FFFFFF; color:#5A6578; cursor:pointer; font:700 9px var(--font-main); text-decoration:none; }
.video-card-actions a { border-color:#376CFB; background:#376CFB; color:#FFFFFF; }
.library-empty { grid-column:1/-1; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:230px; padding:32px; border:1px dashed #CED7E7; border-radius:15px; background:#FBFCFE; text-align:center; }
.library-empty.compact { min-height:174px; }
.library-empty b { color:#475467; font-size:13px; }
.library-empty span { margin-top:5px; color:#929BAB; font-size:10px; }
.library-empty button { margin-top:12px; padding:8px 12px; border:0; border-radius:8px; background:#376CFB; color:#FFFFFF; cursor:pointer; font:750 10px var(--font-main); }
.best-source-link { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.best-shopping-notice {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:14px;
  padding:15px 17px;
  border:1px solid #DCE6FA;
  border-radius:13px;
  background:linear-gradient(120deg,#F7FAFF,#EEF3FF);
}
.best-shopping-notice div { min-width:0; }
.best-shopping-notice b,.best-shopping-notice span { display:block; }
.best-shopping-notice b { color:#244FC7; font-size:12px; }
.best-shopping-notice span { margin-top:3px; color:#667085; font-size:10px; }
.best-shopping-notice p { max-width:520px; color:#8490A3; font-size:9px; line-height:1.55; text-align:right; }
.best-shopping-tabs {
  display:flex;
  gap:7px;
  margin-bottom:15px;
  padding:6px;
  overflow-x:auto;
  border:1px solid #E1E7F0;
  border-radius:13px;
  background:#FFFFFF;
  scrollbar-width:thin;
}
.best-shopping-tabs button {
  flex:0 0 auto;
  min-height:36px;
  padding:8px 13px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#687386;
  cursor:pointer;
  font:750 11px var(--font-main);
}
.best-shopping-tabs button:hover { background:#F5F8FF; color:#376CFB; }
.best-shopping-tabs button.active { background:#376CFB; box-shadow:0 5px 13px rgba(55,108,251,.18); color:#FFFFFF; }
.best-shopping-content { min-height:420px; }
.best-shopping-loading { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.best-shopping-loading span { display:block; min-height:290px; border-radius:15px; background:linear-gradient(100deg,#F0F3F8 30%,#FAFBFD 48%,#F0F3F8 66%); background-size:250% 100%; animation:bestLoading 1.25s infinite linear; }
@keyframes bestLoading { to { background-position:-250% 0; } }
.best-keyword-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.best-keyword-card {
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto auto auto;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:13px 14px;
  border:1px solid #E1E7F0;
  border-radius:13px;
  background:#FFFFFF;
  box-shadow:0 5px 16px rgba(31,41,55,.035);
}
.best-rank { display:grid; width:34px; height:34px; place-items:center; border-radius:10px; background:#EEF3FF; color:#376CFB; font-size:12px; font-weight:900; }
.best-keyword-card>div { min-width:0; }
.best-keyword-card strong,.best-keyword-card small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.best-keyword-card strong { color:#253044; font-size:12px; }
.best-keyword-card small { margin-top:3px; color:#9099AA; font-size:9px; }
.best-keyword-card>em { min-width:34px; font-size:9px; font-style:normal; font-weight:850; text-align:center; }
.best-keyword-card>em.up { color:#EF4444; }.best-keyword-card>em.down { color:#3977E8; }.best-keyword-card>em.new { color:#16A36B; }.best-keyword-card>em.stable { color:#A1A9B7; }
.best-keyword-card button,.best-keyword-card>a { padding:7px 9px; border-radius:8px; cursor:pointer; font:750 9px var(--font-main); text-decoration:none; white-space:nowrap; }
.best-keyword-card button { border:1px solid #376CFB; background:#376CFB; color:#FFFFFF; }
.best-keyword-card>a { border:1px solid #DCE3EF; background:#FFFFFF; color:#657187; }
.best-brand-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.best-brand-card { position:relative; display:flex; min-width:0; min-height:190px; padding:20px 15px 16px; align-items:center; flex-direction:column; border:1px solid #E1E7F0; border-radius:15px; background:#FFFFFF; box-shadow:0 6px 18px rgba(31,41,55,.04); color:inherit; text-align:center; text-decoration:none; }
.best-brand-card>.best-rank { position:absolute; top:10px; left:10px; width:29px; height:29px; }
.best-brand-logo { position:relative; display:grid; width:67px; height:67px; margin-top:8px; place-items:center; overflow:hidden; border:1px solid #DCE6FF; border-radius:18px; background:linear-gradient(145deg,#F7FAFF,#E8EFFF); color:#376CFB; font-size:24px; font-weight:900; }
.best-brand-logo::before { position:absolute; inset:0; display:grid; place-items:center; content:attr(data-initial); }
.best-brand-logo img { position:relative; z-index:1; width:100%; height:100%; object-fit:contain; background:#FFFFFF; }
.best-brand-card strong { max-width:100%; margin-top:12px; overflow:hidden; color:#253044; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.best-brand-card small { min-height:28px; margin-top:6px; overflow:hidden; color:#8B95A7; font-size:8px; line-height:1.55; }
.best-brand-card em { margin-top:auto; color:#376CFB; font-size:9px; font-style:normal; font-weight:750; }
.best-product-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:13px; }
.best-product-card { min-width:0; overflow:hidden; border:1px solid #E1E7F0; border-radius:15px; background:#FFFFFF; box-shadow:0 7px 21px rgba(31,41,55,.045); }
.best-product-image { position:relative; display:block; aspect-ratio:1/1; overflow:hidden; background:#F5F7FA; }
.best-product-image img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .2s ease; }
.best-product-card:hover .best-product-image img { transform:scale(1.025); }
.best-product-image>span { display:grid; width:100%; height:100%; place-items:center; color:#98A1B0; font-size:9px; }
.best-product-image>b,.best-product-image>em { position:absolute; top:9px; padding:5px 7px; border-radius:7px; color:#FFFFFF; font-size:9px; font-style:normal; }
.best-product-image>b { left:9px; background:rgba(24,34,54,.82); }.best-product-image>em { right:9px; background:#EF4444; font-weight:850; }
.best-product-copy { padding:12px; }
.best-product-copy>small { display:block; color:#8C96A7; font-size:8px; }
.best-product-copy>strong { display:-webkit-box; min-height:35px; margin-top:5px; overflow:hidden; color:#344054; font-size:11px; line-height:1.55; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.best-product-copy>div { display:flex; align-items:flex-end; justify-content:space-between; gap:5px; margin-top:10px; }
.best-product-copy>div b { color:#1F2937; font-size:13px; }.best-product-copy>div span { overflow:hidden; color:#9A7130; font-size:7px; text-overflow:ellipsis; white-space:nowrap; }
.best-product-copy>a { display:block; margin-top:10px; padding:8px; border-radius:8px; background:#EEF3FF; color:#2D5FD7; font-size:9px; font-weight:800; text-align:center; text-decoration:none; }
.today-best-stack { display:grid; gap:18px; }
.today-best-card { padding:18px; border:1px solid #E1E7F0; border-radius:17px; background:#FFFFFF; }
.today-best-heading { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.today-best-heading img { width:68px; height:68px; object-fit:cover; border-radius:13px; }
.today-best-heading span { color:#376CFB; font-size:8px; font-weight:900; letter-spacing:.12em; }
.today-best-heading h3 { margin-top:3px; color:#253044; font-size:17px; }.today-best-heading p { margin-top:4px; color:#7C8799; font-size:10px; }
.viral-policy-notice { display:flex; align-items:center; gap:12px; margin-bottom:14px; padding:13px 16px; border:1px solid #DCE6FA; border-radius:13px; background:#F7FAFF; }
.viral-policy-notice span { flex:0 0 auto; padding:5px 9px; border-radius:999px; background:#376CFB; color:#FFFFFF; font-size:9px; font-weight:850; }
.viral-policy-notice p { color:#667085; font-size:10px; line-height:1.55; }
.viral-source-grid { display:grid; grid-template-columns:1fr; gap:14px; }
.viral-source-card { padding:18px; border:1px solid #E1E7F0; border-radius:16px; background:#FFFFFF; box-shadow:0 7px 22px rgba(31,41,55,.04); }
.viral-source-card.youtube { border-top:3px solid #FF0033; }
.viral-source-heading { display:flex; align-items:center; gap:10px; }
.viral-source-heading .viral-platform-icon { display:grid; width:35px; height:35px; place-items:center; border-radius:11px; background:#FFF0F3; color:#EB1740; font-size:14px; font-weight:900; }
.viral-source-heading b,.viral-source-heading small { display:block; }.viral-source-heading b { color:#253044; font-size:13px; }.viral-source-heading small { margin-top:2px; color:#8A94A6; font-size:9px; }
.viral-feed-schedule { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:14px; }
.viral-feed-schedule span { padding:6px 9px; border:1px solid #DCE6FA; border-radius:999px; background:#F7FAFF; color:#3D68E8; font-size:8px; font-weight:850; }
.viral-feed-schedule em { margin-left:2px; color:#7D8798; font-size:8px; font-style:normal; }
.viral-category-tabs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; margin-top:14px; }
.viral-category-tabs button { min-width:0; padding:9px 7px; overflow:hidden; border:1px solid #DDE4EF; border-radius:10px; background:#FBFCFE; color:#596579; cursor:pointer; font:750 9px var(--font-main); text-overflow:ellipsis; white-space:nowrap; transition:.16s ease; }
.viral-category-tabs button:hover { border-color:#9DB4FF; background:#F5F8FF; color:#376CFB; }
.viral-category-tabs button.active { border-color:#376CFB; background:#376CFB; box-shadow:0 5px 14px rgba(55,108,251,.18); color:#FFFFFF; }
.viral-category-tabs button small { margin-left:3px; opacity:.78; font-size:7px; }
.viral-feed-status-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:11px; }
.viral-feed-status-row .viral-source-status { margin-top:0; }
.viral-feed-status-row button { flex:0 0 auto; min-height:32px; padding:7px 10px; font-size:8px; }
.viral-search-controls { display:grid; grid-template-columns:minmax(160px,1fr) 118px 125px auto; align-items:end; gap:8px; margin-top:15px; }
.viral-search-controls label { display:grid; gap:5px; min-width:0; }
.viral-search-controls label span { color:#667085; font-size:8px; font-weight:800; }
.viral-search-controls input,.viral-search-controls select { width:100%; min-height:38px; padding:8px 10px; border:1px solid #D9E1ED; border-radius:9px; outline:0; background:#FBFCFE; color:#344054; font:650 10px var(--font-main); }
.viral-search-controls input:focus,.viral-search-controls select:focus { border-color:#7B9CFF; box-shadow:0 0 0 3px rgba(55,108,251,.1); background:#FFFFFF; }
.viral-search-controls button { min-height:38px; padding:8px 12px; white-space:nowrap; }
.viral-source-status { margin-top:11px; color:#7D8798; font-size:8px; line-height:1.5; }.viral-source-status.error { color:#D64545; }
.viral-results-section { margin-top:16px; padding:19px; border:1px solid #E1E7F0; border-radius:17px; background:#FFFFFF; }
.viral-results-section.saved { background:#FAFBFD; }
.viral-results-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:15px; margin-bottom:14px; }
.viral-results-heading span { color:#376CFB; font-size:8px; font-weight:900; letter-spacing:.1em; }.viral-results-heading h3 { margin-top:3px; color:#253044; font-size:17px; }.viral-results-heading>small { color:#7D8798; font-size:9px; font-weight:800; }
.viral-video-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; min-height:220px; }
.viral-video-card { min-width:0; overflow:hidden; border:1px solid #E1E7F0; border-radius:14px; background:#FFFFFF; box-shadow:0 6px 19px rgba(31,41,55,.045); }
.viral-thumbnail { position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:linear-gradient(145deg,#111827,#29344A); color:inherit; text-decoration:none; }
.viral-thumbnail>img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .2s ease; }.viral-video-card:hover .viral-thumbnail>img { transform:scale(1.025); }
.viral-no-thumbnail { display:grid; width:100%; height:100%; place-items:center; color:rgba(255,255,255,.9); font-size:34px; }
.viral-platform-badge { position:absolute; top:8px; left:8px; padding:4px 7px; border-radius:999px; background:#F50A38; color:#FFFFFF; font-size:7px; font-weight:850; }.viral-platform-badge.instagram { background:linear-gradient(120deg,#8B42C8,#E8447E,#F59A32); }
.viral-thumbnail>em { position:absolute; right:8px; bottom:8px; padding:4px 6px; border-radius:6px; background:rgba(10,15,26,.82); color:#FFFFFF; font-size:8px; font-style:normal; font-weight:800; }
.viral-video-copy { padding:12px; }.viral-view-row { display:flex; align-items:center; justify-content:space-between; gap:6px; }.viral-view-row strong { color:#F04457; font-size:11px; }.viral-view-row small { color:#939CAB; font-size:7px; }
.viral-video-copy h4 { display:-webkit-box; min-height:34px; margin-top:6px; overflow:hidden; color:#344054; font-size:11px; line-height:1.5; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.viral-video-copy>p { margin-top:5px; overflow:hidden; color:#8A94A6; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.viral-video-copy>div:last-child { display:flex; gap:6px; margin-top:11px; }.viral-video-copy>div:last-child a,.viral-video-copy>div:last-child button { flex:1; min-height:31px; padding:7px; border-radius:8px; cursor:pointer; font:750 8px var(--font-main); text-align:center; text-decoration:none; }
.viral-video-copy>div:last-child a { border:1px solid #DCE3EF; background:#FFFFFF; color:#596579; }.viral-video-copy>div:last-child button { border:1px solid #376CFB; background:#376CFB; color:#FFFFFF; }
.viral-results-section.saved .viral-video-copy>div:last-child button { border-color:#E3E7EE; background:#FFFFFF; color:#7A8495; }
.ebook-free-promo { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:28px; margin-bottom:18px; padding:25px 28px; overflow:hidden; border:1px solid #CAD8FF; border-radius:18px; background:linear-gradient(120deg,#F8FAFF 0%,#EEF3FF 58%,#E5EDFF 100%); box-shadow:0 10px 28px rgba(55,108,251,.09); }
.ebook-free-promo>div:first-child>span { color:#376CFB; font-size:9px; font-weight:900; letter-spacing:.12em; }
.ebook-free-promo h3 { margin-top:6px; color:#1F2937; font-size:21px; letter-spacing:-.5px; }
.ebook-free-promo p { max-width:720px; margin-top:7px; color:#667085; font-size:11px; line-height:1.65; }
.ebook-price { display:grid; min-width:170px; justify-items:end; }
.ebook-price del { color:#8A94A6; font-size:12px; font-weight:750; }
.ebook-price strong { margin-top:1px; color:#376CFB; font-size:31px; line-height:1.05; }
.ebook-price em { margin-top:5px; padding:5px 9px; border-radius:999px; background:#376CFB; color:#FFFFFF; font-size:9px; font-style:normal; font-weight:850; }
.resource-library-stack { display:grid; gap:18px; }
.resource-feature-card { display:grid; grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr); overflow:hidden; border:1px solid #E1E7F0; border-radius:18px; background:#FFFFFF; box-shadow:0 10px 30px rgba(31,41,55,.055); }
.ebook-cover-wrap { display:grid; min-height:460px; padding:30px; place-items:center; background:linear-gradient(145deg,#EDF3FF,#F8FAFF); }
.ebook-cover-wrap img { display:block; width:min(100%,310px); max-height:400px; object-fit:contain; border-radius:5px; box-shadow:0 18px 40px rgba(35,56,104,.2); }
.resource-copy { align-self:center; padding:38px clamp(28px,5vw,64px); }
.resource-badge { display:inline-block; padding:6px 10px; border-radius:999px; background:#EEF3FF; color:#376CFB; font-size:10px; font-weight:800; }
.resource-free-label { display:flex; align-items:center; gap:9px; margin-top:13px; font-size:10px; }
.resource-free-label del { color:#98A1B0; font-weight:700; }
.resource-free-label strong { padding:4px 8px; border-radius:999px; background:#EAFBF1; color:#168546; font-size:9px; }
.ebook-social-proof { display:flex; align-items:center; gap:10px; width:max-content; margin-top:12px; padding:8px 11px; border:1px solid #DCE5FA; border-radius:10px; background:#F6F8FF; color:#68758C; font-size:9px; font-weight:700; }
.ebook-social-proof b { color:#2C68FB; font-size:11px; }.ebook-social-proof i { width:1px; height:13px; background:#D8E1F3; }
.resource-copy h3 { margin-top:17px; color:#1F2937; font-size:27px; letter-spacing:-.7px; }
.resource-copy>p { max-width:650px; margin-top:12px; color:#667085; font-size:13px; line-height:1.75; }
.resource-copy ul { display:grid; gap:8px; margin:20px 0 0 18px; color:#475467; font-size:12px; }
.resource-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:25px; }
.resource-download { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.ebook-access-button { min-height:43px; padding:10px 15px; border-radius:10px; cursor:pointer; font:800 11px var(--font-main); }
.resource-member-note { margin-top:11px !important; color:#8792A5 !important; font-size:9px !important; line-height:1.5 !important; }
.resource-member-note.is-member-ready { color:#168546 !important; font-weight:750; }
.resource-coming-soon { margin-top:16px; padding:22px 24px; border:1px solid #E1E7F0; border-radius:16px; background:#FFFFFF; }
.resource-coming-soon span { color:#98A1B0; font-size:9px; font-weight:800; }
.resource-coming-soon h3 { margin-top:4px; color:#344054; font-size:15px; }
.resource-coming-soon p { margin-top:5px; color:#7B8495; font-size:11px; }
.voice-quota-info { margin:0; padding:9px 11px; border:1px solid #DCE5FA; border-radius:9px; background:#F5F8FF; color:#52698F; font-size:10px; font-weight:700; }
.support-layout { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr); gap:16px; align-items:start; }
.support-form-card,.support-history-card { padding:24px; border:1px solid #E1E7F0; border-radius:17px; background:#FFFFFF; box-shadow:0 8px 24px rgba(31,41,55,.045); }
.support-card-heading>span { color:#376CFB; font-size:9px; font-weight:850; letter-spacing:.1em; }
.support-card-heading h3 { margin-top:5px; color:#263248; font-size:18px; letter-spacing:-.35px; }
.support-card-heading>p { margin-top:6px; color:#7A8496; font-size:11px; line-height:1.6; }
.support-form-fields { display:grid; gap:14px; margin-top:20px; }
.support-form-fields label { display:grid; gap:7px; }
.support-form-fields label>span { color:#526078; font-size:11px; font-weight:800; }
.support-form-fields label>span em { color:#98A2B3; font-size:9px; font-style:normal; font-weight:650; }
.support-form-fields input,.support-form-fields select,.support-form-fields textarea,.admin-support-note,.admin-support-status { width:100%; border:1px solid #D8E0ED; border-radius:10px; background:#FFFFFF; color:#344054; font:650 11px var(--font-main); outline:none; }
.support-form-fields input,.support-form-fields select { min-height:43px; padding:9px 12px; }
.support-form-fields textarea,.admin-support-note { padding:11px 12px; line-height:1.65; resize:vertical; }
.support-form-fields input:focus,.support-form-fields select:focus,.support-form-fields textarea:focus,.admin-support-note:focus { border-color:#86A7FF; box-shadow:0 0 0 3px rgba(55,108,251,.1); }
.support-form-fields label.is-recommended>span::after { content:' · 자세히 적어주세요'; color:#E06C43; font-size:9px; }
.support-submit-button { min-height:45px; border-radius:10px; font-weight:850; }
.support-form-status { min-height:18px; margin:0; color:#376CFB; font-size:10px; line-height:1.55; }
.support-login-required { display:grid; gap:13px; margin-top:20px; padding:22px; border:1px dashed #C7D5F5; border-radius:13px; background:#F7F9FF; text-align:center; }
.support-login-required b { color:#526078; font-size:12px; }.support-login-required button { justify-self:center; }
.support-ticket-list { display:grid; gap:10px; max-height:680px; margin-top:20px; overflow:auto; }
.support-empty { display:grid; min-height:170px; padding:25px; place-items:center; border:1px dashed #D6DDE9; border-radius:12px; background:#FBFCFE; color:#8A94A6; font-size:11px; text-align:center; }
.support-empty.error { color:#D04A4A; }
.support-ticket-item { padding:16px; border:1px solid #E3E8F1; border-radius:13px; background:#FBFCFE; }
.support-ticket-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.support-ticket-top>span { color:#60708A; font-size:9px; font-weight:800; }
.support-ticket-top>em { padding:4px 7px; border-radius:999px; background:#EEF3FF; color:#376CFB; font-size:8px; font-style:normal; font-weight:850; }
.support-ticket-top>em.status-resolved { background:#EAFBF1; color:#168546; }.support-ticket-top>em.status-in_progress { background:#FFF5E4; color:#C36B0A; }
.support-ticket-item h4 { margin-top:8px; color:#344054; font-size:13px; }.support-ticket-item>p { margin-top:7px; color:#667085; font-size:10px; line-height:1.65; white-space:pre-wrap; }.support-ticket-item>small { display:block; margin-top:9px; color:#98A2B3; font-size:8px; }
.support-reply { margin-top:12px; padding:12px; border-left:3px solid #376CFB; border-radius:0 9px 9px 0; background:#F0F5FF; }.support-reply b { color:#285AD9; font-size:9px; }.support-reply p { margin-top:5px; color:#526078; font-size:10px; line-height:1.65; white-space:pre-wrap; }
.admin-support-item { display:grid; gap:10px; padding:16px 2px; border-bottom:1px solid #E8EDF4; }
.admin-support-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }.admin-support-heading>div { display:flex; flex-direction:column; gap:4px; }.admin-support-heading span { color:#376CFB; font-size:8px; font-weight:850; }.admin-support-heading strong { color:#344054; font-size:12px; }.admin-support-heading small,.admin-support-url { color:#8A94A6; font-size:8px; }
.admin-support-item>p { color:#667085; font-size:10px; line-height:1.6; white-space:pre-wrap; }.admin-support-item details { color:#667085; font-size:9px; }.admin-support-item summary { cursor:pointer; color:#376CFB; font-weight:750; }.admin-support-item pre { margin-top:7px; padding:9px; overflow:auto; border-radius:8px; background:#F4F6FA; color:#596579; white-space:pre-wrap; }
.admin-support-actions { display:grid; grid-template-columns:150px auto; gap:8px; justify-content:end; }.admin-support-status { min-height:36px; padding:7px 9px; }.admin-support-save { min-width:72px; }

@media (max-width:1180px) {
  .dashboard-shell { grid-template-columns:204px minmax(0,1fr); }
  .dashboard-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .video-library-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .best-product-grid,.best-brand-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .viral-source-grid { grid-template-columns:1fr; }.viral-video-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .viral-category-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .viral-search-controls { grid-template-columns:minmax(160px,1fr) 118px 125px auto; }
  .dashboard-shell .status-badge { display:none; }
}
@media (max-width:900px) {
  .dashboard-shell { display:block; }
  .app-sidebar { position:sticky; height:auto; padding:11px 14px; border-right:0; border-bottom:1px solid #E4E9F1; }
  .sidebar-brand { padding:0 4px 10px; font-size:17px; }
  .sidebar-logo { width:31px; height:31px; }.sidebar-logo img { width:25px; height:25px; }
  .sidebar-nav { flex-direction:row; overflow-x:auto; padding-bottom:2px; }
  .sidebar-nav-item { display:flex; flex:0 0 auto; min-height:38px; padding:7px 10px; gap:7px; font-size:12px; }
  .sidebar-nav-item span { font-size:14px; }.sidebar-guide,.sidebar-footer { display:none; }
  .dashboard-main-grid { grid-template-columns:1fr; }
  .video-library-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .best-keyword-grid { grid-template-columns:1fr; }
  .best-product-grid,.best-brand-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .viral-video-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dashboard-shell>.app-layout { padding-top:14px; }
  .dashboard-shell .app-header { align-items:flex-start; }
  .page-heading p,.page-eyebrow { display:none; }
  .resource-feature-card { grid-template-columns:1fr; }
  .support-layout { grid-template-columns:1fr; }
  .ebook-free-promo { grid-template-columns:1fr; }
  .ebook-price { justify-items:start; }
  .ebook-cover-wrap { min-height:350px; }.ebook-cover-wrap img { max-height:300px; }
}
@media (max-width:640px) {
  .dashboard-shell>.app-layout { padding:10px 10px 32px; }
  .dashboard-shell .app-header { min-height:62px; padding:11px 13px; }
  .page-heading h1 { font-size:17px; }
  .dashboard-shell .header-actions { flex-wrap:wrap; justify-content:flex-end; }
  .dashboard-shell .header-actions .status-badge,.dashboard-shell #openAdminBtn,.dashboard-shell #openHistoryBtn { display:none; }
  .dashboard-shell .header-actions button { padding:8px 9px; font-size:10px; }
  .dashboard-welcome { align-items:flex-start; flex-direction:column; min-height:0; padding:22px; }
  .dashboard-welcome h2 { font-size:21px; }.dashboard-welcome p { font-size:11px; }
  .viral-policy-notice { align-items:flex-start; flex-direction:column; }
  .viral-category-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .viral-feed-status-row { align-items:flex-start; flex-direction:column; }
  .viral-search-controls { grid-template-columns:1fr; }
  .viral-video-grid { grid-template-columns:1fr; }
  .dashboard-primary-action { width:100%; }
  .dashboard-metrics,.onboarding-steps { grid-template-columns:1fr; }
  .dashboard-recent-grid,.video-library-grid { grid-template-columns:1fr; }
  .best-shopping-notice { align-items:flex-start; flex-direction:column; }.best-shopping-notice p { text-align:left; }
  .best-shopping-loading { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .best-product-grid,.best-brand-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .best-keyword-card { grid-template-columns:34px minmax(0,1fr) auto; }.best-keyword-card button,.best-keyword-card>a { grid-column:2/-1; text-align:center; }
  .content-page-heading { align-items:flex-start; flex-direction:column; padding:18px; }
  .content-page-actions { width:100%; }.content-page-actions button { flex:1; }
  .library-notice { align-items:flex-start; flex-direction:column; }
  .resource-copy { padding:25px 20px; }.resource-copy h3 { font-size:22px; }
  .ebook-free-promo { padding:21px 19px; }.ebook-free-promo h3 { font-size:18px; }
  .resource-actions { flex-direction:column; }.resource-actions>* { width:100%; }
  .support-form-card,.support-history-card { padding:19px; }
  .admin-support-heading { flex-direction:column; }.admin-support-actions { grid-template-columns:1fr; }
  .login-modal { width:calc(100vw - 18px); max-height:calc(100vh - 18px); border-radius:17px; }
  .login-modal-hero { grid-template-columns:48px minmax(0,1fr) 30px; gap:11px; padding:21px 17px 18px; }
  .login-brand-symbol { width:48px; height:48px; border-radius:14px; }.login-brand-symbol img { width:38px; height:38px; }
  .login-modal-hero h3 { font-size:20px; }.login-modal-hero p { font-size:10px; }
  .login-modal-body { padding:18px 17px 20px; }
  .login-benefit-row { grid-template-columns:1fr; }.login-benefit-row>div { display:grid; grid-template-columns:28px 1fr; align-items:center; padding:9px 11px; }.login-benefit-row b { margin:0; }.login-benefit-row small { grid-column:2; }
}

/* ─────────────────────────────────────────────────────────────
   Autorabbit marketing entry page
   ───────────────────────────────────────────────────────────── */
body.is-landing {
  background:#FFFFFF;
  background-image:none;
}
body.is-landing .app-sidebar,
body.is-landing .dashboard-shell .app-header,
body.is-landing .dashboard-shell .app-view { display:none !important; }
body.is-landing .dashboard-shell {
  display:block;
  min-height:0;
  background:transparent;
}
body.is-landing .dashboard-shell>.app-layout {
  min-height:0;
  padding:0;
}
.marketing-landing {
  min-height:100vh;
  background:#FFFFFF;
  color:#1D2939;
}
.landing-header {
  position:sticky;
  top:0;
  z-index:50;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  width:100%;
  min-height:74px;
  padding:0 max(24px,calc((100vw - 1240px)/2));
  border-bottom:1px solid rgba(218,226,240,.86);
  background:rgba(255,255,255,.93);
  backdrop-filter:blur(18px);
}
.landing-brand {
  display:flex;
  align-items:center;
  justify-self:start;
  gap:10px;
  color:#1F2937;
  font:800 1.25rem var(--font-brand);
  letter-spacing:-.03em;
  text-decoration:none;
}
.landing-brand>span {
  display:grid;
  width:38px;
  height:38px;
  place-items:center;
  border-radius:12px;
  background:#EEF3FF;
  box-shadow:0 6px 18px rgba(55,108,251,.15);
}
.landing-brand img { width:31px; height:31px; object-fit:contain; }
.landing-brand em { color:#376CFB; font-style:normal; }
.landing-nav { display:flex; align-items:center; justify-content:center; gap:30px; }
.landing-nav a { color:#526078; font-size:.875rem; font-weight:700; text-decoration:none; }
.landing-nav a:hover { color:#376CFB; }
.landing-header-actions { display:flex; align-items:center; justify-self:end; gap:8px; }
.landing-header-actions button {
  min-height:40px;
  padding:9px 15px;
  border-radius:10px;
  cursor:pointer;
  font:750 .875rem var(--font-main);
}
.landing-login { border:0; background:transparent; color:#526078; }
.landing-dashboard-button { border:1px solid #376CFB; background:#376CFB; color:#FFFFFF; box-shadow:0 6px 14px rgba(55,108,251,.18); }
.landing-dashboard-button:hover { background:#2D5DE0; }
.landing-main { overflow:hidden; }
.landing-hero {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(440px,.96fr);
  align-items:center;
  gap:70px;
  max-width:1240px;
  min-height:660px;
  margin:0 auto;
  padding:74px 24px 64px;
}
.landing-hero::before {
  position:absolute;
  top:45px;
  right:-250px;
  width:650px;
  height:520px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(55,108,251,.14),rgba(55,108,251,0) 69%);
  content:'';
  pointer-events:none;
}
.landing-hero-copy { position:relative; z-index:2; }
.landing-pill {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border:1px solid #D4E0FF;
  border-radius:999px;
  background:#F5F8FF;
  color:#315ECE;
  font-size:.8125rem;
  font-weight:800;
}
.landing-pill i { width:7px; height:7px; border-radius:50%; background:#22C55E; box-shadow:0 0 0 4px rgba(34,197,94,.12); }
.landing-hero h1 {
  margin-top:24px;
  color:#162033;
  font-size:clamp(2.65rem,4.5vw,4.45rem);
  line-height:1.08;
  letter-spacing:-.065em;
}
.landing-hero h1 strong { color:#376CFB; font-weight:850; }
.landing-hero-copy>p {
  max-width:640px;
  margin-top:24px;
  color:#5F6C82;
  font-size:1.0625rem;
  line-height:1.8;
  word-break:keep-all;
}
.landing-hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.landing-hero-actions button {
  min-height:52px;
  padding:13px 21px;
  border-radius:12px;
  cursor:pointer;
  font:800 .9375rem var(--font-main);
}
.landing-main-cta { border:1px solid #376CFB; background:#376CFB; color:#FFFFFF; box-shadow:0 10px 24px rgba(55,108,251,.22); }
.landing-main-cta:hover { background:#2D5DE0; transform:translateY(-1px); }
.landing-main-cta span { margin-left:10px; }
.landing-sub-cta { border:1px solid #D9E1EE; background:#FFFFFF; color:#344054; }
.landing-sub-cta:hover { border-color:#9DB7FF; background:#F7FAFF; }
.landing-value-row { display:flex; align-items:center; flex-wrap:wrap; gap:17px; margin-top:34px; }
.landing-value-row div { display:flex; flex-direction:column; gap:2px; }
.landing-value-row b { color:#24324A; font-size:.9375rem; }
.landing-value-row span { color:#8993A4; font-size:.75rem; }
.landing-value-row>i { width:1px; height:32px; background:#DDE3ED; }
.landing-product-visual {
  position:relative;
  z-index:2;
  padding:18px;
  overflow:hidden;
  border:1px solid #DDE5F2;
  border-radius:23px;
  background:linear-gradient(145deg,#FFFFFF,#F6F9FF);
  box-shadow:0 26px 65px rgba(39,61,110,.17),0 2px 8px rgba(39,61,110,.06);
}
.visual-window-bar { display:flex; align-items:center; gap:6px; padding:0 2px 16px; border-bottom:1px solid #E6EBF3; }
.visual-window-bar>span { width:8px; height:8px; border-radius:50%; background:#CBD3E0; }
.visual-window-bar>span:first-child { background:#FF9B90; }.visual-window-bar>span:nth-child(2) { background:#FFD47D; }.visual-window-bar>span:nth-child(3) { background:#74DDB1; }
.visual-window-bar b { margin-left:8px; color:#526078; font-size:.75rem; }
.visual-progress { display:flex; align-items:center; gap:8px; margin:17px 0; padding:11px 13px; border-radius:11px; background:#EEF3FF; }
.visual-progress i { width:9px; height:9px; border-radius:50%; background:#376CFB; box-shadow:0 0 0 5px rgba(55,108,251,.12); }
.visual-progress span { color:#315ECE; font-size:.75rem; font-weight:800; }
.visual-progress em { margin-left:auto; color:#159B6C; font-size:.75rem; font-style:normal; font-weight:800; }
.visual-workflow-list { display:flex; flex-direction:column; gap:9px; }
.visual-workflow-list article { display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:11px; padding:13px; border:1px solid #E5EAF2; border-radius:12px; background:#FFFFFF; }
.visual-workflow-list article>span { display:grid; width:38px; height:38px; place-items:center; border-radius:10px; background:#F2F4F7; color:#7D8797; font-size:.75rem; font-weight:850; }
.visual-workflow-list article b { display:block; color:#344054; font-size:.875rem; }
.visual-workflow-list article small { display:block; margin-top:3px; color:#8A94A6; font-size:.75rem; }
.visual-workflow-list article>em { color:#98A2B3; font-size:.75rem; font-style:normal; font-weight:800; }
.visual-workflow-list article.complete>span { background:#EAFBF4; color:#159B6C; }
.visual-workflow-list article.complete>em { color:#22A06B; }
.visual-workflow-list article.active { border-color:#9EB7FF; background:#F8FAFF; box-shadow:0 0 0 3px rgba(55,108,251,.07); }
.visual-workflow-list article.active>span { background:#376CFB; color:#FFFFFF; }
.visual-workflow-list article.active>em { color:#376CFB; }
.visual-output-card { display:flex; align-items:center; gap:12px; margin-top:15px; padding:14px; border-radius:13px; background:#172033; color:#FFFFFF; }
.visual-play { display:grid; width:40px; height:40px; place-items:center; border-radius:11px; background:#376CFB; }
.visual-output-card div { display:flex; flex:1; flex-direction:column; }.visual-output-card b { font-size:.875rem; }.visual-output-card small { margin-top:2px; color:#A9B4C7; font-size:.75rem; }
.visual-output-card strong { padding:5px 8px; border-radius:7px; background:rgba(255,255,255,.1); color:#DCE6FF; font-size:.75rem; }
.landing-proof-section {
  position:relative;
  display:grid;
  grid-template-columns:minmax(290px,.72fr) minmax(520px,1.28fr);
  align-items:center;
  gap:48px;
  max-width:1192px;
  margin:0 auto 100px;
  padding:52px;
  overflow:hidden;
  border-radius:28px;
  background:linear-gradient(145deg,#111C33 0%,#17284C 58%,#163A77 100%);
  box-shadow:0 28px 70px rgba(18,38,77,.2);
}
.landing-proof-section::before {
  position:absolute;
  right:-170px;
  bottom:-230px;
  width:520px;
  height:520px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(55,108,251,.48),rgba(55,108,251,0) 68%);
  content:'';
  pointer-events:none;
}
.landing-proof-copy { position:relative; z-index:2; }
.landing-proof-kicker { color:#8EAEFF; font:800 .75rem var(--font-brand); letter-spacing:.14em; }
.landing-proof-copy h2 { margin-top:15px; color:#FFFFFF; font-size:clamp(2rem,3.1vw,2.8rem); line-height:1.22; letter-spacing:-.055em; word-break:keep-all; }
.landing-proof-copy h2 strong { color:#77A0FF; font-weight:850; }
.landing-proof-copy>p { margin-top:18px; color:#B8C4D8; font-size:.9375rem; line-height:1.75; word-break:keep-all; }
.landing-proof-copy ul { display:grid; gap:13px; margin-top:26px; list-style:none; }
.landing-proof-copy li { display:flex; align-items:flex-start; gap:11px; }
.landing-proof-copy li>span { display:grid; flex:0 0 29px; height:29px; place-items:center; border:1px solid rgba(142,174,255,.34); border-radius:9px; background:rgba(55,108,251,.14); color:#AFC5FF; font:800 .6875rem var(--font-brand); }
.landing-proof-copy li b { display:block; color:#F7F9FF; font-size:.875rem; }
.landing-proof-copy li small { display:block; margin-top:3px; color:#94A4BD; font-size:.75rem; line-height:1.5; }
.landing-comparison-toggle { margin-top:27px; min-height:44px; padding:11px 15px; border:1px solid rgba(255,255,255,.18); border-radius:11px; background:rgba(255,255,255,.09); color:#FFFFFF; cursor:pointer; font:750 .8125rem var(--font-main); }
.landing-comparison-toggle:hover { border-color:#729BFF; background:#376CFB; }
.landing-comparison-stage { position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr); align-items:center; gap:10px; }
.landing-comparison-card { min-width:0; padding:10px; border:1px solid rgba(255,255,255,.13); border-radius:20px; background:rgba(255,255,255,.075); box-shadow:0 18px 36px rgba(4,10,24,.24); backdrop-filter:blur(10px); }
.landing-comparison-card.is-after { border-color:rgba(119,160,255,.58); background:linear-gradient(160deg,rgba(55,108,251,.24),rgba(255,255,255,.09)); box-shadow:0 22px 48px rgba(12,29,70,.35),0 0 0 1px rgba(119,160,255,.12); }
.landing-video-label { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:2px 3px 10px; }
.landing-video-label span { padding:5px 8px; border-radius:999px; font:850 .6875rem var(--font-brand); letter-spacing:.08em; }
.is-before .landing-video-label span { background:rgba(255,130,120,.16); color:#FFB1A9; }
.is-after .landing-video-label span { background:rgba(105,150,255,.2); color:#AFC6FF; }
.landing-video-label small { overflow:hidden; color:#C0CAD9; font-size:.6875rem; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.landing-video-frame { position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.12); border-radius:14px; background:#05070C; aspect-ratio:9/16; }
.landing-video-frame video { display:block; width:100%; height:100%; object-fit:cover; background:#05070C; }
.landing-after-chip { position:absolute; right:8px; bottom:8px; display:flex; align-items:center; gap:5px; padding:5px 7px; border:1px solid rgba(255,255,255,.2); border-radius:999px; background:rgba(11,22,45,.76); color:#E7EEFF; font:750 .5625rem var(--font-brand); letter-spacing:.04em; backdrop-filter:blur(8px); }
.landing-after-chip i { width:5px; height:5px; border-radius:50%; background:#5FF0B1; box-shadow:0 0 0 3px rgba(95,240,177,.13); }
.landing-comparison-arrow { display:flex; align-items:center; flex-direction:column; justify-content:center; gap:4px; }
.landing-comparison-arrow span { display:grid; width:43px; height:43px; place-items:center; border:1px solid rgba(255,255,255,.18); border-radius:50%; background:#376CFB; color:#FFFFFF; font-size:1.25rem; box-shadow:0 10px 25px rgba(27,69,180,.38); }
.landing-comparison-arrow small { color:#90ACF3; font:800 .625rem var(--font-brand); letter-spacing:.12em; }
.landing-benefit-strip {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  max-width:1192px;
  margin:0 auto;
  overflow:hidden;
  border:1px solid #DDE5F2;
  border-radius:17px;
  background:#FFFFFF;
  box-shadow:0 12px 35px rgba(31,41,55,.065);
}
.landing-benefit-strip div { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:112px; padding:18px; text-align:center; }
.landing-benefit-strip div:not(:last-child)::after { position:absolute; right:0; width:1px; height:42px; background:#E3E8F1; content:''; }
.landing-benefit-strip strong { color:#376CFB; font:800 1.6rem var(--font-brand); }
.landing-benefit-strip span { margin-top:4px; color:#667085; font-size:.8125rem; font-weight:700; }
.landing-section { max-width:1240px; margin:0 auto; padding:120px 24px; }
.landing-section-heading { max-width:790px; margin:0 auto 44px; text-align:center; }
.landing-section-heading>span,.landing-workflow-copy>span { color:#376CFB; font-size:.75rem; font-weight:850; letter-spacing:.13em; }
.landing-section-heading h2,.landing-workflow-copy h2 { margin-top:13px; color:#172033; font-size:clamp(2rem,3.3vw,3rem); line-height:1.28; letter-spacing:-.05em; }
.landing-section-heading>p { margin-top:15px; color:#667085; font-size:1rem; line-height:1.75; }
.landing-feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.landing-feature-grid article { position:relative; min-height:260px; padding:25px; overflow:hidden; border:1px solid #E0E7F1; border-radius:17px; background:#FFFFFF; box-shadow:0 8px 26px rgba(31,41,55,.045); }
.landing-feature-grid article:hover { border-color:#AEC2FA; transform:translateY(-3px); box-shadow:0 14px 34px rgba(45,80,160,.085); }
.feature-number { position:absolute; top:20px; right:20px; color:#D1D9E6; font:800 .75rem var(--font-brand); }
.feature-symbol { display:grid; width:46px; height:46px; place-items:center; border-radius:13px; font:850 1rem var(--font-brand); }
.feature-symbol.blue { background:#EEF3FF; color:#376CFB; }.feature-symbol.cyan { background:#EAF9FC; color:#1A95B0; }.feature-symbol.violet { background:#F2EEFF; color:#7357D2; }
.feature-symbol.mint { background:#EAFBF4; color:#159B6C; }.feature-symbol.amber { background:#FFF5E4; color:#C77A12; }.feature-symbol.rose { background:#FFF0F4; color:#D64872; }
.landing-feature-grid h3 { margin-top:23px; color:#26334A; font-size:1.125rem; }
.landing-feature-grid p { margin-top:10px; color:#667085; font-size:.9375rem; line-height:1.72; word-break:keep-all; }
.landing-guide-section {
  position:relative; display:grid; grid-template-columns:minmax(290px,.72fr) minmax(0,1.28fr); gap:54px;
  max-width:1192px; margin:0 auto 120px; padding:54px; overflow:hidden; border:1px solid #D8E3F8;
  border-radius:25px; background:linear-gradient(135deg,#F8FAFF 0%,#EEF3FF 100%); box-shadow:0 22px 55px rgba(45,80,160,.1);
}
.landing-guide-section::before { position:absolute; top:-150px; left:-130px; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle,rgba(55,108,251,.16),rgba(55,108,251,0) 69%); content:''; pointer-events:none; }
.landing-guide-copy { position:relative; z-index:1; align-self:center; }
.landing-guide-kicker { color:#376CFB; font:850 .75rem var(--font-brand); letter-spacing:.12em; }
.landing-guide-copy h2 { margin-top:14px; color:#172033; font-size:clamp(2rem,3.1vw,2.75rem); line-height:1.25; letter-spacing:-.055em; word-break:keep-all; }
.landing-guide-copy h2 strong { color:#376CFB; font-weight:850; }
.landing-guide-copy>p { margin-top:17px; color:#667085; font-size:1rem; line-height:1.75; word-break:keep-all; }
.landing-guide-points { display:grid; gap:10px; margin-top:25px; list-style:none; }
.landing-guide-points li { display:flex; align-items:flex-start; gap:11px; padding:12px 13px; border:1px solid rgba(187,203,237,.75); border-radius:12px; background:rgba(255,255,255,.72); }
.landing-guide-points li>span { display:grid; flex:0 0 31px; height:31px; place-items:center; border-radius:9px; background:#E7EEFF; color:#376CFB; font:850 .6875rem var(--font-brand); }
.landing-guide-points b { display:block; color:#344054; font-size:.875rem; }.landing-guide-points small { display:block; margin-top:3px; color:#7B8799; font-size:.75rem; line-height:1.5; }
.landing-guide-play { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:47px; margin-top:24px; padding:12px 17px; border:1px solid #376CFB; border-radius:11px; background:#376CFB; color:#FFFFFF; cursor:pointer; font:850 .875rem var(--font-main); box-shadow:0 9px 21px rgba(55,108,251,.22); }
.landing-guide-play:hover { background:#2D5DE0; transform:translateY(-1px); }.landing-guide-play span { font-size:.75rem; }
.landing-guide-tip { display:block; margin-top:11px; color:#8490A3; font-size:.75rem; line-height:1.55; }
.landing-guide-player-card { position:relative; z-index:1; align-self:center; overflow:hidden; border:1px solid #CAD8F2; border-radius:19px; background:#FFFFFF; box-shadow:0 18px 44px rgba(34,61,120,.17); }
.landing-guide-player-bar { display:flex; align-items:center; justify-content:space-between; min-height:48px; padding:11px 14px; border-bottom:1px solid #E1E8F4; background:#FFFFFF; }
.landing-guide-player-bar>div { display:flex; align-items:center; gap:8px; }.landing-guide-player-bar i { width:8px; height:8px; border-radius:50%; background:#22C55E; box-shadow:0 0 0 4px rgba(34,197,94,.12); }
.landing-guide-player-bar b { color:#344054; font:800 .75rem var(--font-brand); letter-spacing:.06em; }.landing-guide-player-bar>span { padding:5px 8px; border-radius:999px; background:#EEF3FF; color:#376CFB; font:800 .6875rem var(--font-brand); }
.landing-guide-video-wrap { position:relative; padding:9px; background:#111827; }
.landing-guide-video-wrap video { display:block; width:100%; aspect-ratio:24/13; border-radius:11px; background:#080B12; object-fit:contain; }
.landing-guide-video-badge { position:absolute; top:20px; left:20px; display:flex; align-items:center; gap:6px; padding:7px 9px; border:1px solid rgba(255,255,255,.2); border-radius:999px; background:rgba(13,23,44,.78); color:#FFFFFF; font-size:.6875rem; font-weight:750; backdrop-filter:blur(8px); pointer-events:none; }
.landing-guide-video-badge i { width:6px; height:6px; border-radius:50%; background:#6EA0FF; box-shadow:0 0 0 3px rgba(110,160,255,.18); }
.landing-workflow-section {
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(440px,1.2fr);
  gap:80px;
  max-width:1192px;
  margin:0 auto 120px;
  padding:58px;
  border-radius:24px;
  background:#172033;
  color:#FFFFFF;
}
.landing-workflow-copy h2 { color:#FFFFFF; }.landing-workflow-copy>p { margin-top:17px; color:#ADB8C9; font-size:1rem; line-height:1.75; }
.landing-workflow-copy button { margin-top:25px; padding:12px 16px; border:1px solid rgba(255,255,255,.18); border-radius:10px; background:rgba(255,255,255,.08); color:#FFFFFF; cursor:pointer; font:750 .875rem var(--font-main); }
.landing-workflow-copy button:hover { background:#376CFB; border-color:#376CFB; }
.landing-workflow-steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; list-style:none; }
.landing-workflow-steps li { display:flex; gap:12px; min-height:135px; padding:18px; border:1px solid rgba(255,255,255,.1); border-radius:14px; background:rgba(255,255,255,.055); }
.landing-workflow-steps li>span { display:grid; flex:0 0 34px; height:34px; place-items:center; border-radius:10px; background:#376CFB; color:#FFFFFF; font:800 .8125rem var(--font-brand); }
.landing-workflow-steps b { color:#FFFFFF; font-size:.9375rem; }.landing-workflow-steps p { margin-top:6px; color:#AEB9CA; font-size:.8125rem; line-height:1.6; }
.landing-pricing-section { padding:120px 24px; background:linear-gradient(180deg,#F7FAFF,#EEF3FF); }
.landing-price-card { display:grid; grid-template-columns:minmax(340px,.82fr) minmax(0,1.18fr); max-width:960px; margin:0 auto; overflow:hidden; border:1px solid #D5E0F6; border-radius:23px; background:#FFFFFF; box-shadow:0 22px 55px rgba(45,80,160,.13); }
.landing-price-summary { display:flex; flex-direction:column; justify-content:center; padding:40px; background:#376CFB; color:#FFFFFF; }
.landing-pro-badge { align-self:flex-start; padding:7px 10px; border-radius:999px; background:rgba(255,255,255,.16); color:#FFFFFF; font-size:.75rem; font-weight:850; letter-spacing:.08em; }
.landing-price-summary>p { margin-top:24px; color:#DCE6FF; font-size:.875rem; }
.landing-price { display:flex; align-items:baseline; flex-wrap:wrap; gap:9px; margin-top:7px; }
.landing-price del { width:100%; color:#BFD0FF; font-size:.875rem; }.landing-price strong { color:#FFFFFF; font:800 2.7rem var(--font-brand); letter-spacing:-.04em; }.landing-price em { color:#DCE6FF; font-size:.875rem; font-style:normal; }
.daily-price { display:flex; align-items:center; gap:8px; margin-top:24px; padding:12px 14px; border-radius:11px; background:rgba(255,255,255,.14); }
.daily-price span { color:#DCE6FF; font-size:.8125rem; }.daily-price b { font-size:1.05rem; }.daily-price small { margin-left:auto; color:#CDDAFF; font-size:.75rem; }
.landing-price-summary>button { margin-top:18px; min-height:48px; border:0; border-radius:11px; background:#FFFFFF; color:#285AD9; cursor:pointer; font:850 .9375rem var(--font-main); box-shadow:0 8px 18px rgba(28,67,171,.22); }
.landing-price-summary>small { margin-top:12px; color:#DCE6FF; font-size:.75rem; line-height:1.55; text-align:center; }
.landing-plan-benefits { padding:40px; }
.landing-plan-benefits h3 { color:#25324A; font-size:1.25rem; }
.landing-plan-benefits ul { display:grid; gap:17px; margin-top:24px; list-style:none; }
.landing-plan-benefits li { display:flex; align-items:flex-start; gap:12px; }
.landing-plan-benefits li>span { display:grid; flex:0 0 24px; height:24px; place-items:center; border-radius:50%; background:#EAFBF4; color:#159B6C; font-size:.75rem; font-weight:900; }
.landing-plan-benefits b { display:block; color:#344054; font-size:.9375rem; }.landing-plan-benefits small { display:block; margin-top:3px; color:#8993A4; font-size:.8125rem; }
.landing-final-cta { display:flex; align-items:center; justify-content:space-between; gap:30px; max-width:1192px; margin:100px auto; padding:40px 44px; border:1px solid #DCE5FA; border-radius:20px; background:#F7FAFF; }
.landing-final-cta span { color:#376CFB; font-size:.75rem; font-weight:850; }.landing-final-cta h2 { margin-top:5px; color:#1D2939; font-size:1.75rem; letter-spacing:-.04em; }.landing-final-cta p { margin-top:8px; color:#667085; font-size:.875rem; }
.landing-final-cta>div:last-child { display:flex; gap:8px; flex-shrink:0; }.landing-final-cta button { min-height:45px; padding:11px 16px; border-radius:10px; cursor:pointer; font:800 .875rem var(--font-main); }
.landing-final-primary { border:1px solid #376CFB; background:#376CFB; color:#FFFFFF; }.landing-final-secondary { border:1px solid #D5DDEA; background:#FFFFFF; color:#475467; }
.landing-footer { display:flex; align-items:center; justify-content:space-between; min-height:92px; padding:20px max(24px,calc((100vw - 1192px)/2)); border-top:1px solid #E4E9F1; background:#FFFFFF; }
.landing-footer>a { display:flex; align-items:center; gap:8px; color:#25324A; font:800 .9375rem var(--font-brand); text-decoration:none; }.landing-footer img { width:30px; height:30px; object-fit:contain; }.landing-footer p { color:#8A94A6; font-size:.8125rem; }.landing-footer button { border:0; background:transparent; color:#376CFB; cursor:pointer; font:800 .8125rem var(--font-main); }

@media (max-width:1000px) {
  .landing-header { grid-template-columns:1fr auto; padding:0 22px; }.landing-nav { display:none; }
  .landing-hero { grid-template-columns:1fr; gap:48px; padding-top:60px; }.landing-hero-copy { text-align:center; }.landing-hero-copy>p { margin-right:auto; margin-left:auto; }.landing-hero-actions,.landing-value-row { justify-content:center; }.landing-product-visual { width:min(100%,620px); margin:0 auto; }
  .landing-proof-section { grid-template-columns:1fr; margin-right:24px; margin-left:24px; }.landing-proof-copy { max-width:680px; text-align:center; margin:0 auto; }.landing-proof-copy ul { max-width:520px; margin-right:auto; margin-left:auto; text-align:left; }.landing-comparison-stage { width:min(100%,620px); margin:0 auto; }
  .landing-benefit-strip { grid-template-columns:repeat(5,1fr); margin-right:24px; margin-left:24px; }
  .landing-feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .landing-guide-section { grid-template-columns:1fr; gap:34px; margin-right:24px; margin-left:24px; padding:42px; }.landing-guide-copy { text-align:center; }.landing-guide-points { max-width:620px; margin-right:auto; margin-left:auto; text-align:left; }.landing-guide-player-card { width:100%; }
  .landing-workflow-section { grid-template-columns:1fr; gap:36px; margin-right:24px; margin-left:24px; }
  .landing-final-cta { margin-right:24px; margin-left:24px; }
}
@media (max-width:720px) {
  .landing-header { min-height:64px; padding:0 14px; }.landing-brand { font-size:1rem; }.landing-brand>span { width:34px; height:34px; }.landing-brand img { width:27px; height:27px; }.landing-login { display:none; }.landing-header-actions button { min-height:38px; padding:8px 11px; font-size:.75rem; }
  .landing-hero { min-height:0; padding:48px 18px; }.landing-hero h1 { font-size:2.5rem; }.landing-hero-copy>p { font-size:.9375rem; }.landing-hero-actions { flex-direction:column; }.landing-hero-actions button { width:100%; }.landing-value-row { gap:10px; }.landing-value-row>i { display:none; }.landing-value-row div { width:calc(50% - 5px); padding:10px; border-radius:10px; background:#F7F9FC; }
  .landing-product-visual { padding:12px; border-radius:17px; }.visual-workflow-list article { grid-template-columns:34px 1fr auto; padding:11px; }.visual-workflow-list article>span { width:34px; height:34px; }.visual-workflow-list article small { display:none; }
  .landing-proof-section { gap:30px; margin:0 18px 70px; padding:31px 17px; border-radius:20px; }.landing-proof-copy h2 { font-size:2rem; }.landing-proof-copy>p { font-size:.875rem; }.landing-comparison-stage { grid-template-columns:1fr 34px 1fr; gap:5px; }.landing-comparison-card { padding:6px; border-radius:14px; }.landing-video-frame { border-radius:10px; }.landing-video-label { align-items:flex-start; flex-direction:column; padding:2px 2px 7px; }.landing-video-label small { max-width:100%; }.landing-comparison-arrow span { width:32px; height:32px; font-size:.9375rem; }.landing-after-chip { display:none; }
  .landing-benefit-strip { grid-template-columns:repeat(2,1fr); margin:0 18px; }.landing-benefit-strip div { min-height:96px; }.landing-benefit-strip div::after { display:none; }.landing-benefit-strip div:last-child { grid-column:1/-1; }
  .landing-section { padding:84px 18px; }.landing-section-heading { margin-bottom:30px; }.landing-section-heading h2,.landing-workflow-copy h2 { font-size:2rem; }.landing-feature-grid { grid-template-columns:1fr; }.landing-feature-grid article { min-height:0; }
  .landing-guide-section { gap:26px; margin:0 18px 84px; padding:27px 18px; border-radius:19px; }.landing-guide-copy h2 { font-size:2rem; }.landing-guide-copy>p { font-size:.9375rem; }.landing-guide-play { width:100%; }.landing-guide-video-badge { top:15px; left:15px; padding:5px 7px; font-size:.625rem; }.landing-guide-player-bar b { font-size:.6875rem; }
  .landing-workflow-section { margin:0 18px 84px; padding:29px 22px; border-radius:18px; }.landing-workflow-steps { grid-template-columns:1fr; }.landing-workflow-steps li { min-height:0; }
  .landing-pricing-section { padding:84px 18px; }.landing-price-card { grid-template-columns:1fr; }.landing-price-summary,.landing-plan-benefits { padding:30px 24px; }
  .landing-final-cta { align-items:flex-start; flex-direction:column; margin:70px 18px; padding:28px 22px; }.landing-final-cta>div:last-child { width:100%; flex-direction:column; }.landing-final-cta button { width:100%; }
  .landing-footer { align-items:flex-start; flex-direction:column; gap:12px; padding:25px 18px; }.landing-footer p { order:3; }
}

/* Thumbnail editor and persistent advertising disclosure */
.thumbnail-ad-editor { display:grid; gap:14px; }
.thumbnail-editor-box,.background-music-editor-box,.ad-label-editor-box {
  padding:16px;
  border:1px solid #DDE5F2;
  border-radius:14px;
  background:#F8FAFF;
}
.background-music-editor-box { display:grid; gap:12px; }
.bgm-category-tabs { display:flex; flex-wrap:wrap; gap:7px; }
.bgm-category-tabs button { min-height:30px; padding:6px 11px; border:1px solid #D8E0ED; border-radius:999px; background:#FFFFFF; color:#68758B; cursor:pointer; font:800 10px var(--font-main); }
.bgm-category-tabs button:hover { border-color:#9BB5FF; color:#376CFB; }
.bgm-category-tabs button.active { border-color:#376CFB; background:#376CFB; color:#FFFFFF; box-shadow:0 4px 10px rgba(55,108,251,.18); }
.bgm-track-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; min-height:62px; }
.bgm-loading { grid-column:1/-1; padding:20px; border:1px dashed #CFD9E9; border-radius:11px; color:#7B879A; text-align:center; font-size:11px; }
.bgm-track-card { display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:9px; min-width:0; padding:10px; border:1px solid #DCE4F1; border-radius:11px; background:#FFFFFF; cursor:pointer; transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease; }
.bgm-track-card:hover { transform:translateY(-1px); border-color:#AFC1F5; box-shadow:0 6px 15px rgba(51,75,121,.08); }
.bgm-track-card.selected { border-color:#376CFB; box-shadow:0 0 0 2px rgba(55,108,251,.10); }
.bgm-track-card.none { grid-column:1/-1; }
.bgm-play-btn { display:grid; width:34px; height:34px; place-items:center; border:0; border-radius:50%; background:#EDF3FF; color:#376CFB; cursor:pointer; font-size:12px; }
.bgm-track-card.selected .bgm-play-btn { background:#376CFB; color:#FFFFFF; }
.bgm-track-copy { min-width:0; }
.bgm-track-copy strong,.bgm-track-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bgm-track-copy strong { color:#2B3950; font-size:11px; }
.bgm-track-copy small { margin-top:3px; color:#8792A5; font-size:9px; }
.bgm-mood-dot { width:8px; height:8px; border-radius:50%; box-shadow:0 0 0 4px color-mix(in srgb,currentColor 13%,transparent); }
.bgm-mix-controls { display:grid; grid-template-columns:minmax(180px,1fr) minmax(210px,1fr); align-items:center; gap:14px; padding:11px 12px; border-radius:11px; background:#F1F5FD; }
.bgm-ducking-toggle { display:flex; align-items:flex-start; gap:9px; color:#35445D; cursor:pointer; }
.bgm-ducking-toggle input { margin-top:2px; accent-color:#376CFB; }
.bgm-ducking-toggle span,.bgm-ducking-toggle b,.bgm-ducking-toggle small { display:block; }
.bgm-ducking-toggle b { font-size:10px; }
.bgm-ducking-toggle small { margin-top:3px; color:#7B879A; font-size:9px; line-height:1.4; }
.bgm-license-note { margin:0; color:#748198; font-size:9px; line-height:1.5; }
.editor-section-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; }
.editor-section-heading strong { display:block; color:#26344C; font-size:14px; }
.editor-section-heading small { display:block; margin-top:4px; color:#7B879A; font-size:11px; }
.editor-status-pill { flex:0 0 auto; padding:5px 9px; border-radius:999px; background:#EEF3FF; color:#376CFB; font-size:9px; font-weight:850; }
.thumbnail-editor-layout { display:grid; grid-template-columns:minmax(150px,210px) minmax(0,1fr); align-items:start; gap:16px; }
.thumbnail-stage {
  position:relative;
  width:100%;
  aspect-ratio:9/16;
  overflow:hidden;
  border:3px solid #26344C;
  border-radius:15px;
  background:#090D15;
  box-shadow:0 10px 24px rgba(35,52,84,.16);
  touch-action:none;
}
.thumbnail-stage canvas { display:block; width:100%; height:100%; background:#090D15; }
.thumbnail-text-overlay {
  position:absolute;
  z-index:2;
  top:18%;
  left:50%;
  width:90%;
  transform:translate(-50%,-50%);
  color:#FFFFFF;
  font-family:'Pretendard Local',sans-serif;
  font-size:19px;
  font-weight:900;
  line-height:1.18;
  text-align:center;
  text-shadow:0 2px 2px rgba(0,0,0,.9),0 0 7px rgba(0,0,0,.65);
  cursor:grab;
  user-select:none;
  touch-action:none;
  word-break:keep-all;
}
.thumbnail-text-overlay.dragging { cursor:grabbing; outline:2px dashed #FFFFFF; outline-offset:4px; }
.thumbnail-empty-state { position:absolute; inset:0; display:grid; place-items:center; padding:24px; background:#090D15; color:#AAB4C5; font-size:11px; text-align:center; }
.thumbnail-editor-controls { display:grid; gap:11px; }
.thumbnail-editor-controls .field-row { gap:9px; }
.thumbnail-editor-controls input[type="text"],.ad-label-controls input[type="text"],.thumbnail-editor-controls select,.ad-label-controls select {
  border-color:#D8E0ED;
  background:#FFFFFF;
  color:#344054;
}
.thumbnail-editor-controls input[type="color"],.ad-label-controls input[type="color"] { background:#FFFFFF; border-color:#D8E0ED; }
.thumbnail-drag-guide { display:block; color:#6B7A91; font-size:10px; line-height:1.55; }
.thumbnail-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.thumbnail-actions button { min-height:39px; padding:9px 12px; border:1px solid #D5DEEC; border-radius:9px; background:#FFFFFF; color:#526078; cursor:pointer; font:800 11px var(--font-main); }
.thumbnail-actions button.primary { border-color:#376CFB; background:#376CFB; color:#FFFFFF; box-shadow:0 6px 14px rgba(55,108,251,.2); }
.thumbnail-actions button:hover { border-color:#9BB5FF; }
.ad-label-controls { display:grid; grid-template-columns:minmax(140px,1fr) minmax(150px,1fr) 88px minmax(160px,1.1fr); align-items:end; gap:10px; }
.compact-toggle { display:flex; align-items:center; gap:7px; color:#376CFB; cursor:pointer; font-size:11px; font-weight:800; }
.compact-toggle input { accent-color:#376CFB; }
.ad-label-preview {
  position:absolute;
  z-index:18;
  top:5%;
  left:90%;
  transform:translate(-50%,-50%);
  padding:3px 4px;
  color:#FFFFFF;
  font-family:'Pretendard Local',sans-serif;
  font-size:10px;
  font-weight:800;
  line-height:1;
  opacity:.85;
  text-shadow:0 1px 3px rgba(0,0,0,.8);
  white-space:nowrap;
  cursor:grab;
  user-select:none;
  touch-action:none;
}
.ad-label-preview.dragging { cursor:grabbing; outline:1px dashed currentColor; outline-offset:3px; }
.video-container:fullscreen .ad-label-preview { font-size:clamp(14px,1.35vw,26px); padding:6px; }
@media (max-width:720px) {
  .thumbnail-editor-layout { grid-template-columns:1fr; }
  .thumbnail-stage { width:min(210px,100%); margin:0 auto; }
  .ad-label-controls { grid-template-columns:1fr 1fr; }
  .bgm-track-grid,.bgm-mix-controls { grid-template-columns:1fr; }
}
.bgm-private-upload { margin: 14px 0; padding: 16px; border: 1px solid #cad8ff; border-radius: 14px; background: #f5f8ff; }
.bgm-private-upload > strong { color: #2454d6; font-size: 14px; }
.bgm-private-upload p { margin: 8px 0 12px; font-size: 12px; line-height: 1.7; color: #64748b; overflow-wrap: anywhere; }
.bgm-private-upload .bgm-ducking-toggle { margin-bottom: 12px; align-items: flex-start; }
.bgm-private-upload button { border: 1px solid #b7caff; border-radius: 9px; padding: 10px 16px; background: #fff; color: #2454d6; cursor: pointer; font-weight: 700; }
.bgm-private-upload button:disabled { opacity: .5; cursor: wait; }