@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --primary: #6C5CE7;
  --primary-light: #A29BFE;
  --primary-dark: #5A4BD1;
  --secondary: #00CEC9;
  --accent: #FD79A8;
  --bg: #FFFFFF;
  --bg-card: #F5F6F8;
  --bg-card-hover: #EDEEF2;
  --text: #1A1A2E;
  --text-secondary: #555;
  --text-muted: #999;
  --border: #E5E7EB;
  --success: #00B894;
  --warning: #FDCB6E;
  --danger: #FF7675;
  --gradient-1: linear-gradient(135deg, #6C5CE7 0%, #A29BFE 100%);
  --gradient-2: linear-gradient(135deg, #00CEC9 0%, #81ECEC 100%);
  --gradient-3: linear-gradient(135deg, #FD79A8 0%, #FDCB6E 100%);
  --shadow: 0 4px 20px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.08);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 6px;
}

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

body {
  font-family: 'Noto Sans KR', 'Inter', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }

button { cursor: pointer; border: none; font-family: inherit; }

input, textarea, select { font-family: inherit; }

::-webkit-scrollbar { width: 6px; }

::-webkit-scrollbar-track { background: var(--bg); }

::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 28px; border-radius: var(--radius-sm); font-weight: 600;
  font-size: 15px; transition: all 0.3s ease; letter-spacing: -0.2px;
}

.btn-primary {
  background: var(--gradient-1); color: white;
  box-shadow: 0 4px 15px rgba(108,92,231,0.4);
}

.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(108,92,231,0.5); }

.btn-secondary {
  background: transparent; color: var(--primary);
  border: 2px solid var(--primary);
}

.btn-secondary:hover { background: rgba(108,92,231,0.05); }

.btn-accent {
  background: var(--gradient-3); color: white;
  box-shadow: 0 4px 15px rgba(253,121,168,0.4);
}

.btn-sm { padding: 8px 18px; font-size: 13px; }

.btn-lg { padding: 16px 40px; font-size: 17px; border-radius: var(--radius); }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600;
  background: rgba(108,92,231,0.15); color: var(--primary-light);
  border: 1px solid rgba(108,92,231,0.3);
}

.card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px;
  transition: all 0.3s ease;
}

.card:hover { border-color: var(--primary); transform: translateY(-2px); }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Loading Skeleton */

.skeleton { background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; border-radius: 8px; }

.skeleton-circle { border-radius: 50%; }

@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.loading-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #F8F9FA; padding: 2rem; }

.loading-page__spinner { width: 36px; height: 36px; border: 3px solid #E5E7EB; border-top-color: #6C5CE7; border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 1rem; }

@keyframes spin { to { transform: rotate(360deg); } }

.loading-page__text { color: #999; font-size: 0.9rem; }
/* ===========================
   WEBSITE PAGE - LANDING PAGE
   =========================== */

.website-page {
  --bg: #FFFFFF;
  --bg-card: #F5F6F8;
  --bg-card-hover: #EDEEF2;
  --text: #1A1A2E;
  --text-secondary: #555;
  --text-muted: #999;
  --border: #E5E7EB;
  width: 100%;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
}

/* ===========================
   NAVBAR
   =========================== */

.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: all 0.3s ease;
}

.navbar.scrolled {
  background: rgba(255, 255, 255, 0.95);
  border-bottom-color: var(--border);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}

.navbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  gap: 40px;
}

.navbar-logo {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -1px;
  background: var(--gradient-1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.navbar-links {
  display: flex;
  gap: 32px;
  flex: 1;
}

.nav-link {
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
}

.nav-link:hover {
  color: var(--primary);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary);
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

.navbar-cta {
  display: flex;
  gap: 12px;
  align-items: center;
}

@media (max-width: 768px) {
  .navbar-content {
    flex-wrap: wrap;
    padding: 12px 0;
    gap: 16px;
  }

  .navbar-logo {
    font-size: 18px;
    flex: 0 0 auto;
  }

  .navbar-links {
    gap: 16px;
    font-size: 13px;
    flex: 0 0 100%;
    order: 3;
  }

  .navbar-cta {
    gap: 8px;
    font-size: 13px;
  }

  .navbar-cta .btn {
    padding: 10px 16px;
    font-size: 12px;
  }
}

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

.hero {
  position: relative;
  padding: 80px 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.3;
  animation: float 6s ease-in-out infinite;
}

.orb-1 {
  width: 400px;
  height: 400px;
  background: rgba(108, 92, 231, 0.4);
  top: -100px;
  right: -100px;
  animation-delay: 0s;
}

.orb-2 {
  width: 350px;
  height: 350px;
  background: rgba(0, 206, 201, 0.3);
  bottom: 50px;
  left: -50px;
  animation-delay: 2s;
}

.orb-3 {
  width: 300px;
  height: 300px;
  background: rgba(253, 121, 168, 0.2);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: 4s;
}

.hero .container {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.hero-text {
  animation: fadeInUp 0.8s ease;
}

.hero-title {
  font-size: 56px;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 24px;
  letter-spacing: -1.5px;
}

.hero-subtitle {
  font-size: 18px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 32px;
}

.hero-cta {
  display: flex;
  gap: 16px;
  margin-bottom: 48px;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}

.stat {
  text-align: left;
}

.stat-value {
  font-size: 32px;
  font-weight: 800;
  background: var(--gradient-1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}

/* Hero Badge */
.hero-badge {
  display: inline-block;
  padding: 8px 16px;
  background: rgba(108, 92, 231, 0.08);
  border: 1px solid rgba(108, 92, 231, 0.2);
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  color: #6C5CE7;
  margin-bottom: 24px;
}

.hero-title--accent {
  background: var(--gradient-1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-trust {
  display: flex;
  gap: 20px;
  font-size: 13px;
  color: #999;
  font-weight: 500;
}
.hero-trust span { display: flex; align-items: center; gap: 4px; }

/* Phone Demo UI */
.phone-content--demo {
  padding: 40px 14px 14px !important;
  background: linear-gradient(180deg, #F8F9FA, #FFFFFF) !important;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
}

.demo-profile {
  text-align: center;
  padding-bottom: 16px;
}
.demo-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #6C5CE7, #A29BFE);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; margin: 0 auto 8px;
  box-shadow: 0 4px 12px rgba(108,92,231,0.3);
}
.demo-name { font-size: 15px; font-weight: 700; color: #1A1A2E; }
.demo-bio { font-size: 11px; color: #999; margin-top: 2px; }

.demo-links {
  display: flex; flex-direction: column; gap: 6px;
  flex: 1;
}

.demo-link {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; background: #FFFFFF; border-radius: 12px;
  border: 1px solid #E5E7EB; font-size: 12px; font-weight: 600; color: #2D3436;
  transition: all 0.2s ease; cursor: default;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.demo-link__icon { font-size: 14px; flex-shrink: 0; }
.demo-link__arrow { margin-left: auto; color: #ccc; font-size: 11px; }
.demo-link__price { margin-left: auto; color: #6C5CE7; font-size: 11px; font-weight: 700; }

.demo-link--product { border-left: 3px solid #FD79A8; }
.demo-link--music { border-left: 3px solid #6C5CE7; }
.demo-link--booking { border-left: 3px solid #0984E3; }
.demo-link--donate { border-left: 3px solid #FDCB6E; }

/* 데모 탭 */
.demo-tabs {
  display: flex; gap: 4px; margin-bottom: 8px;
}
.demo-tab {
  flex: 1; text-align: center; padding: 5px 0; border-radius: 8px;
  font-size: 9px; font-weight: 700; color: #999; background: #F5F6F8;
  cursor: default;
}
.demo-tab--active {
  background: #6C5CE7; color: #fff;
}

.demo-url {
  text-align: center; padding: 10px 0 4px;
  font-size: 10px; color: #A29BFE; font-weight: 600;
  letter-spacing: 0.5px;
}

/* === Feature Rows (기능 + 폰 이미지) === */
.features-list-section {
  display: flex; flex-direction: column; gap: 40px;
}
.feature-row {
  display: flex; align-items: center; gap: 32px;
}
.feature-row--reverse { flex-direction: row-reverse; }
.feature-text {
  flex: 1; min-width: 0;
}
.feature-text .feature-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: linear-gradient(135deg, #6C5CE7, #A29BFE);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin-bottom: 12px;
}
.feature-text h3 {
  font-size: 1.2rem; font-weight: 800; color: #1A1A2E; margin: 0 0 8px;
}
.feature-text p {
  font-size: 0.9rem; color: #666; line-height: 1.6; margin: 0;
}

/* Feature 폰 미니 */
.feature-phone {
  flex-shrink: 0;
}
.feature-phone-frame {
  width: 160px; height: 280px; border-radius: 24px;
  background: #fff; border: 3px solid #E5E7EB;
  padding: 20px 10px 10px; overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}
.fp-content {
  display: flex; flex-direction: column; gap: 6px; height: 100%;
}
.fp-tab-bar {
  display: flex; gap: 3px; margin-bottom: 4px;
}
.fp-tab {
  flex: 1; text-align: center; padding: 4px 0; border-radius: 6px;
  font-size: 7px; font-weight: 700; color: #999; background: #F5F6F8;
}
.fp-tab--active { background: #6C5CE7; color: #fff; }
.fp-item {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 8px; border-radius: 8px; border: 1px solid #E5E7EB;
  font-size: 8px; font-weight: 600; color: #333; background: #fff;
}
.fp-item span { font-size: 10px; }
.fp-item em { margin-left: auto; font-style: normal; color: #6C5CE7; font-size: 7px; font-weight: 700; }
.fp-item--product { border-left: 2px solid #FD79A8; }
.fp-item--accent { border-left: 2px solid #6C5CE7; }

/* 명함 미니 */
.fp-namecard {
  background: #fff; border-radius: 10px; border: 1px solid #E5E7EB;
  overflow: hidden; margin-top: 10px;
}
.fp-nc-accent { height: 4px; background: linear-gradient(90deg, #6C5CE7, #00CEC9); }
.fp-nc-body { padding: 10px 8px; }
.fp-nc-company { font-size: 7px; color: #6C5CE7; font-weight: 700; margin: 0 0 2px; }
.fp-nc-name { font-size: 10px; font-weight: 800; color: #1A1A2E; margin: 0 0 6px; }
.fp-nc-divider { width: 24px; height: 2px; background: #6C5CE7; border-radius: 1px; margin-bottom: 6px; }
.fp-nc-detail { font-size: 7px; color: #555; margin: 2px 0; }

/* Solve 미니 그리드 */
.fp-solve-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
}
.fp-solve-card {
  text-align: center; padding: 8px 4px; border-radius: 8px;
  border: 1px solid #E5E7EB; background: #fff;
}
.fp-solve-card span { font-size: 14px; display: block; margin-bottom: 2px; }
.fp-solve-card small { font-size: 6px; font-weight: 700; color: #555; }

/* 통계 미니 */
.fp-stat-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 8px; border-radius: 8px; border: 1px solid #E5E7EB;
  font-size: 8px; color: #555; background: #fff;
}
.fp-stat-row strong { color: #6C5CE7; font-size: 10px; }

/* 모바일: 기능 세로 배치 */
@media (max-width: 768px) {
  .feature-row, .feature-row--reverse { flex-direction: column; gap: 20px; text-align: center; }
  .feature-text .feature-icon { margin: 0 auto 12px; }
  .feature-phone-frame { width: 140px; height: 240px; padding: 16px 8px 8px; }
}

.stat-label {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Phone Mockup */
.hero-mockup {
  display: flex;
  justify-content: center;
  align-items: center;
  animation: float 6s ease-in-out infinite;
}

.phone-frame {
  width: 280px;
  height: 580px;
  background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
  border-radius: 40px;
  border: 12px solid #1a1a1a;
  box-shadow:
    0 0 0 1px #3a3a3a,
    0 20px 60px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.phone-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 28px;
  background: #1a1a1a;
  border-radius: 0 0 20px 20px;
  z-index: 10;
}

.phone-content {
  width: 100%;
  height: 100%;
  padding: 40px 16px 16px;
  background: linear-gradient(135deg, var(--bg) 0%, var(--bg-card) 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.phone-content--live {
  padding: 0;
  overflow: hidden;
}

.phone-iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: #F8F9FA;
  pointer-events: none;
}

.mockup-link-1 { animation: fadeInUp 0.8s ease 0.2s backwards; }
.mockup-link-2 { animation: fadeInUp 0.8s ease 0.4s backwards; }
.mockup-link-3 { animation: fadeInUp 0.8s ease 0.6s backwards; }
.mockup-link-4 { animation: fadeInUp 0.8s ease 0.8s backwards; }

/* 모바일 CTA — PC에서 숨김 */
.hero-cta--mobile, .hero-trust--mobile { display: none; }

@media (max-width: 1024px) {
  .hero-content {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }

  /* 텍스트 → 폰 → CTA 순서 */
  .hero-text { order: 1; }
  .hero-mockup { order: 2; }
  .hero-cta--mobile { order: 3; }
  .hero-trust--mobile { order: 4; }

  /* PC용 CTA/trust 숨김, 모바일용 표시 */
  .hero-cta--desktop, .hero-trust--desktop { display: none; }
  .hero-cta--mobile { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; padding: 0 1rem; }
  .hero-cta--mobile .btn { width: 100%; max-width: 400px; }
  .hero-trust--mobile { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--text-muted); }

  .hero-cta { justify-content: center; }
  .hero-trust { justify-content: center; }

  .phone-frame {
    width: 280px;
    height: 580px;
  }
}

@media (max-width: 768px) {
  .hero {
    padding: 40px 0 60px;
    min-height: auto;
  }

  .hero-title {
    font-size: 32px;
  }

  .hero-subtitle {
    font-size: 15px;
  }

  .hero-cta {
    flex-direction: column;
    align-items: center;
  }

  .hero-badge { font-size: 12px; padding: 6px 12px; }
  .hero-trust { flex-wrap: wrap; gap: 12px; font-size: 11px; justify-content: center; }

  .hero-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .stat-value {
    font-size: 24px;
  }

  .phone-frame {
    width: 260px;
    height: 540px;
  }
}

@media (max-width: 380px) {
  .phone-frame {
    width: 240px;
    height: 500px;
  }
}

/* ===========================
   FEATURES SECTION
   =========================== */

.features {
  padding: 100px 0;
  background: var(--bg);
  position: relative;
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
  animation: fadeInUp 0.8s ease;
}

.section-header h2 {
  font-size: 44px;
  font-weight: 900;
  margin-bottom: 16px;
  letter-spacing: -1px;
}

.section-header p {
  font-size: 18px;
  color: var(--text-secondary);
  max-width: 500px;
  margin: 0 auto;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 24px;
  text-align: center;
  transition: all 0.3s ease;
  animation: fadeInUp 0.8s ease;
}

.feature-card:hover {
  border-color: var(--primary);
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(108, 92, 231, 0.2);
}

.feature-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.feature-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}

.feature-card p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

@media (max-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .features {
    padding: 60px 0;
  }

  .section-header h2 {
    font-size: 32px;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .feature-card {
    padding: 24px 16px;
  }
}

/* ===========================
   HOW IT WORKS
   =========================== */

.how-it-works {
  padding: 100px 0;
  background: linear-gradient(135deg, rgba(108, 92, 231, 0.05), rgba(0, 206, 201, 0.05));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  position: relative;
}

.step-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 32px;
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
  animation: fadeInUp 0.8s ease;
}

.step-card:hover {
  border-color: var(--primary);
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(108, 92, 231, 0.2);
}

.step-number {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--gradient-1);
  color: white;
  font-size: 32px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  box-shadow: 0 8px 24px rgba(108, 92, 231, 0.3);
}

.step-card h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
}

.step-card p {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.step-arrow {
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 32px;
  color: var(--primary);
  font-weight: 700;
}

.step-arrow:last-child {
  display: none;
}

@media (max-width: 768px) {
  .how-it-works {
    padding: 60px 0;
  }

  .steps-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .step-arrow {
    display: none;
  }

  .step-card {
    padding: 32px 24px;
  }
}

/* ===========================
   PRICING SECTION
   =========================== */

.pricing {
  padding: 100px 0;
  background: var(--bg);
}

.pricing-toggle {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 60px;
}

.toggle-btn {
  padding: 12px 28px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.toggle-btn:hover {
  border-color: var(--primary);
  color: var(--text);
}

.toggle-btn.active {
  background: var(--gradient-1);
  border-color: var(--primary);
  color: white;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.pricing-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 24px;
  position: relative;
  transition: all 0.3s ease;
  animation: fadeInUp 0.8s ease;
  display: flex;
  flex-direction: column;
}

.pricing-card:hover {
  border-color: var(--primary);
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(108, 92, 231, 0.2);
}

.pricing-card.popular {
  border-color: var(--primary);
  background: linear-gradient(135deg, rgba(108, 92, 231, 0.1), rgba(162, 155, 254, 0.05));
  transform: scale(1.05);
}

.popular-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gradient-1);
  color: white;
  padding: 4px 16px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}

.pricing-card h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
  margin-top: 8px;
}

.plan-description {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 24px;
  min-height: 40px;
  align-items: center;
}

.price .free {
  font-size: 32px;
  font-weight: 900;
  color: var(--text);
}

.amount {
  font-size: 32px;
  font-weight: 900;
  background: var(--gradient-1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.period {
  font-size: 13px;
  color: var(--text-secondary);
}

.btn-block {
  width: 100%;
  margin-bottom: 24px;
}

.features-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
}

.checkmark {
  color: var(--success);
  font-weight: 700;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .pricing {
    padding: 60px 0;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .pricing-card.popular {
    transform: scale(1);
  }

  .pricing-toggle {
    flex-direction: column;
  }
}

/* ===========================
   TESTIMONIALS SECTION
   =========================== */

.testimonials {
  padding: 100px 0;
  background: linear-gradient(135deg, rgba(108, 92, 231, 0.05), rgba(0, 206, 201, 0.05));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.testimonial-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  transition: all 0.3s ease;
  animation: fadeInUp 0.8s ease;
}

.testimonial-card:hover {
  border-color: var(--primary);
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(108, 92, 231, 0.2);
}

.stars {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  font-size: 18px;
}

.testimonial-text {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
  font-style: italic;
}

.testimonial-author {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.author-avatar {
  font-size: 32px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.author-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.author-role {
  font-size: 12px;
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .testimonials {
    padding: 60px 0;
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
  }
}

/* ===========================
   CTA SECTION
   =========================== */

.cta-section {
  padding: 80px 0;
  background: linear-gradient(135deg, var(--bg-card), rgba(108, 92, 231, 0.1));
  border-top: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(108, 92, 231, 0.2), transparent);
  border-radius: 50%;
  z-index: 0;
}

.cta-content {
  position: relative;
  z-index: 1;
  text-align: center;
  animation: fadeInUp 0.8s ease;
}

.cta-section h2 {
  font-size: 44px;
  font-weight: 900;
  margin-bottom: 16px;
  letter-spacing: -1px;
}

.cta-section p {
  font-size: 18px;
  color: var(--text-secondary);
  margin-bottom: 32px;
}

@media (max-width: 768px) {
  .cta-section {
    padding: 60px 0;
  }

  .cta-section h2 {
    font-size: 32px;
  }

  .cta-section p {
    font-size: 16px;
  }
}

/* ===========================
   FOOTER
   =========================== */

.footer {
  padding: 60px 0 30px;
  background: rgba(26, 26, 46, 0.5);
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 40px;
}

.footer-section h4 {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.footer-logo {
  font-size: 20px;
  font-weight: 800;
  background: var(--gradient-1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 12px;
}

.footer-section p {
  font-size: 13px;
  line-height: 1.6;
}

.footer-section ul {
  list-style: none;
}

.footer-section ul li {
  margin-bottom: 8px;
}

.footer-section a {
  font-size: 13px;
  color: var(--text-secondary);
  transition: all 0.3s ease;
}

.footer-section a:hover {
  color: var(--primary);
}

.footer-bottom {
  text-align: center;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .footer-content {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .footer {
    padding: 40px 0 20px;
  }
}

/* ===========================
   ANIMATIONS
   =========================== */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* ===========================
   UTILITY CLASSES
   =========================== */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===========================
   RESPONSIVE ADJUSTMENTS
   =========================== */

@media (max-width: 480px) {
  .website-page {
    font-size: 14px;
  }

  .navbar-links {
    display: none;
  }

  .navbar-content {
    gap: 12px;
  }

  .hero-title {
    font-size: 28px;
  }

  .hero-subtitle {
    font-size: 14px;
  }

  .hero-cta {
    flex-direction: column;
  }

  .hero-cta .btn {
    width: 100%;
  }

  .section-header h2 {
    font-size: 28px;
  }

  .section-header p {
    font-size: 14px;
  }

  .feature-card {
    padding: 20px 16px;
  }

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

  .pricing-card {
    padding: 24px 16px;
  }

  .cta-section h2 {
    font-size: 28px;
  }

  .testimonial-card {
    padding: 24px 16px;
  }
}

/* ===========================
   UPGRADE: Stats Section
   =========================== */
.stats-section {
  padding: 40px 0;
  background: linear-gradient(135deg, #6C5CE7, #a855f7);
}

.stats-grid {
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}

.stat-item {
  text-align: center;
  color: #fff;
}

.stat-number {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -1px;
}

.stat-label {
  font-size: 0.8rem;
  opacity: 0.8;
  margin-top: 4px;
}

/* ===========================
   UPGRADE: Ecosystem Section
   =========================== */
.ecosystem-section {
  padding: 80px 0;
  background: #F9FAFB;
}

.ecosystem-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 40px;
}

.eco-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px 20px;
  border: 1.5px solid #E5E7EB;
  transition: all 0.2s ease;
  cursor: default;
}

.eco-card:hover {
  border-color: #6C5CE7;
  box-shadow: 0 4px 20px rgba(108, 92, 231, 0.1);
  transform: translateY(-2px);
}

.eco-card[onclick] { cursor: pointer; }

.eco-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.eco-card__icon {
  font-size: 1.8rem;
}

.eco-card__tag {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: #F3F4F6;
  color: #555;
}

.eco-card__tag--new {
  background: #DBEAFE;
  color: #1e40af;
}

.eco-card__tag--soon {
  background: #FFF7ED;
  color: #C2410C;
}

.eco-card__title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: #1A1A2E;
}

.eco-card__desc {
  font-size: 0.78rem;
  color: #777;
  line-height: 1.5;
  margin: 0;
}

.eco-card__link {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #6C5CE7;
}

/* ===========================
   3-Tab Showcase Section
   =========================== */
.tab-showcase {
  padding: 80px 0;
  background: #fff;
}

.tab-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.tab-card {
  background: #F9FAFB;
  border-radius: 16px;
  padding: 28px 24px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.tab-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

/* ===========================
   Role System Section
   =========================== */
.roles-section {
  padding: 80px 0;
  background: #F9FAFB;
}

.roles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.role-card {
  background: #fff;
  border-radius: 16px;
  padding: 28px 24px;
  border: 1px solid #E5E7EB;
  transition: transform 0.2s, box-shadow 0.2s;
}

.role-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

/* Demo Social Bar */
.demo-social-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 0.6rem;
  color: #999;
}

/* ===========================
   UPGRADE: Use Cases
   =========================== */
.usecases-section {
  padding: 80px 0;
  background: #F9FAFB;
}

.usecases-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 40px;
}

.usecase-card {
  background: #fff;
  border-radius: 16px;
  padding: 28px 20px;
  text-align: center;
  border-top: 4px solid #6C5CE7;
  transition: transform 0.2s;
}

.usecase-card:hover {
  transform: translateY(-3px);
}

.usecase-card__icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
}

.usecase-card h3 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: #1A1A2E;
}

.usecase-card p {
  font-size: 0.8rem;
  color: #777;
  line-height: 1.5;
  margin: 0;
}

/* ===========================
   Fork & Royalty Section
   =========================== */
.fork-section {
  padding: 80px 0;
  background: #fff;
}

.fork-highlights {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
}

.fork-highlight-card {
  background: #F9FAFB;
  border-radius: 16px;
  padding: 32px 28px;
  text-align: center;
  border: 1.5px solid #E5E7EB;
  flex: 1;
  max-width: 280px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.fork-highlight-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

.fork-highlight-arrow {
  font-size: 1.5rem;
  color: #6C5CE7;
  font-weight: 700;
  flex-shrink: 0;
}

/* 활용사례 6카드 그리드 */
.usecases-grid--6 {
  grid-template-columns: repeat(3, 1fr);
}

/* (Bible styles removed — content relocated to /bible landing page) */

/* ===========================
   MOBILE RESPONSIVE (new sections)
   =========================== */
@media (max-width: 768px) {
  .stats-grid {
    gap: 24px;
  }
  .stat-number {
    font-size: 1.5rem;
  }
  .ecosystem-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .eco-card {
    padding: 16px 14px;
  }
  .eco-card__icon {
    font-size: 1.4rem;
  }
  .eco-card__title {
    font-size: 0.85rem;
  }
  .eco-card__desc {
    font-size: 0.72rem;
  }
  .tab-showcase-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .roles-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .usecases-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .usecases-grid--6 {
    grid-template-columns: repeat(2, 1fr);
  }
  .usecase-card {
    padding: 20px 14px;
  }
  .usecase-card__icon {
    font-size: 2rem;
  }
  .usecase-card h3 {
    font-size: 0.85rem;
  }
  .fork-highlights {
    flex-direction: column;
    gap: 12px;
  }
  .fork-highlight-card {
    max-width: 100%;
  }
  .fork-highlight-arrow {
    transform: rotate(90deg);
  }
}
/* ActsLink 랜딩 — 다크블루 + 성령의 불 악센트 */

:root {
  --acts-primary: #1E40AF;
  --acts-primary-dark: #1E3A8A;
  --acts-primary-light: #3B82F6;
  --acts-accent: #F59E0B;
  --acts-accent-dark: #D97706;
  --acts-bg: #FFFFFF;
  --acts-bg-alt: #F0F4FF;
  --acts-bg-dark: #0F172A;
  --acts-text: #1E293B;
  --acts-text-muted: #64748B;
  --acts-border: #E2E8F0;
  --acts-radius: 16px;
}

.acts-landing {
  font-family: 'Noto Sans KR', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--acts-text);
  background: var(--acts-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.acts-landing * { box-sizing: border-box; }

/* ---------- Nav ---------- */
.acts-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.0);
  transition: background 0.3s, box-shadow 0.3s, backdrop-filter 0.3s;
}
.acts-nav.scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(15, 23, 42, 0.08);
}
.acts-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.acts-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--acts-primary);
  text-decoration: none;
}
.acts-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--acts-primary), var(--acts-primary-light));
  color: white;
  font-size: 1.1rem;
}
.acts-nav-menu {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0; padding: 0;
}
.acts-nav-menu a {
  color: var(--acts-text);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: color 0.2s;
}
.acts-nav-menu a:hover { color: var(--acts-primary); }
.acts-nav-cta { display: flex; gap: 10px; }

/* ---------- Buttons ---------- */
.acts-btn-primary, .acts-btn-secondary, .acts-btn-ghost, .acts-btn-outline {
  border: none;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
}
.acts-btn-primary {
  background: linear-gradient(135deg, var(--acts-primary), var(--acts-primary-light));
  color: white;
  box-shadow: 0 4px 14px rgba(30, 64, 175, 0.25);
}
.acts-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(30, 64, 175, 0.35); }
.acts-btn-secondary {
  background: var(--acts-accent);
  color: #0F172A;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25);
}
.acts-btn-secondary:hover { background: var(--acts-accent-dark); color: white; transform: translateY(-1px); }
.acts-btn-ghost {
  background: transparent;
  color: var(--acts-text);
}
.acts-btn-ghost:hover { background: var(--acts-bg-alt); }
.acts-btn-outline {
  background: transparent;
  color: var(--acts-primary);
  border: 2px solid var(--acts-primary);
}
.acts-btn-outline:hover { background: var(--acts-primary); color: white; }
.acts-btn-primary.large, .acts-btn-secondary.large {
  padding: 16px 32px;
  font-size: 1.05rem;
  border-radius: 12px;
}

/* ---------- Hero ---------- */
.acts-hero {
  position: relative;
  padding: 160px 24px 100px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--acts-bg-alt) 0%, var(--acts-bg) 100%);
}
.acts-hero-bg {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.12), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(245, 158, 11, 0.10), transparent 50%);
  pointer-events: none;
}
.acts-hero-inner {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.acts-eyebrow {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(30, 64, 175, 0.08);
  color: var(--acts-primary);
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 20px;
}
.acts-hero-headline {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 900;
  line-height: 1.15;
  margin: 0 0 20px;
  background: linear-gradient(135deg, var(--acts-primary-dark), var(--acts-primary-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: pre-line;
}
.acts-hero-subline {
  font-size: 1.25rem;
  color: var(--acts-text);
  font-weight: 600;
  margin: 0 0 12px;
}
.acts-hero-desc {
  font-size: 1.05rem;
  color: var(--acts-text-muted);
  margin: 0 auto 32px;
  max-width: 640px;
}
.acts-hero-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.acts-hero-stats {
  display: flex;
  gap: 40px;
  justify-content: center;
  flex-wrap: wrap;
}
.acts-hero-stats div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.acts-hero-stats strong {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--acts-primary);
}
.acts-hero-stats span {
  font-size: 0.85rem;
  color: var(--acts-text-muted);
  margin-top: 4px;
}

/* ---------- Section common ---------- */
.acts-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 24px;
}
.acts-section-head {
  text-align: center;
  margin-bottom: 56px;
}
.acts-section-head h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--acts-primary-dark);
}
.acts-section-head p {
  font-size: 1.05rem;
  color: var(--acts-text-muted);
  margin: 0;
}

/* ---------- Flow ---------- */
.acts-flow { background: var(--acts-bg-alt); border-radius: 0; margin: 0; padding-left: 24px; padding-right: 24px; max-width: none; }
.acts-flow-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.acts-flow-card {
  background: white;
  padding: 40px 28px;
  border-radius: var(--acts-radius);
  text-align: center;
  border: 2px solid transparent;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
  position: relative;
}
.acts-flow-card:hover {
  transform: translateY(-4px);
  border-color: var(--acts-primary-light);
  box-shadow: 0 12px 36px rgba(30, 64, 175, 0.12);
}
.acts-flow-num {
  position: absolute;
  top: 16px; right: 20px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--acts-primary-light);
  opacity: 0.5;
}
.acts-flow-icon { font-size: 3rem; margin-bottom: 16px; }
.acts-flow-card h3 {
  font-size: 1.35rem;
  margin: 0 0 10px;
  color: var(--acts-primary-dark);
}
.acts-flow-card p {
  color: var(--acts-text-muted);
  margin: 0;
}

/* ---------- Creator / Roles ---------- */
.acts-role-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.acts-role-card {
  background: white;
  border: 2px solid var(--acts-border);
  border-radius: var(--acts-radius);
  padding: 36px 28px;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
  display: flex;
  flex-direction: column;
}
.acts-role-card:hover {
  transform: translateY(-4px);
  border-color: var(--acts-primary);
  box-shadow: 0 12px 36px rgba(30, 64, 175, 0.12);
}
.acts-role-icon { font-size: 2.4rem; margin-bottom: 14px; }
.acts-role-card h3 {
  font-size: 1.3rem;
  margin: 0 0 8px;
  color: var(--acts-primary-dark);
}
.acts-role-card > p {
  color: var(--acts-text-muted);
  margin: 0 0 20px;
  font-size: 0.95rem;
}
.acts-role-card ul {
  list-style: none;
  padding: 0; margin: 0 0 24px;
  flex: 1;
}
.acts-role-card ul li {
  padding: 8px 0;
  padding-left: 22px;
  position: relative;
  color: var(--acts-text);
  font-size: 0.92rem;
}
.acts-role-card ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--acts-accent);
  font-weight: 700;
}
.acts-role-creator { border-color: var(--acts-primary-light); }
.acts-role-creator::before {
  /* 중심 카드 강조는 CSS 만으로도 가능 */
}

/* ---------- Tools ---------- */
.acts-tools { background: var(--acts-bg-alt); max-width: none; padding-left: 24px; padding-right: 24px; }
.acts-tools-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.acts-tool-card {
  background: white;
  padding: 32px 28px;
  border-radius: var(--acts-radius);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}
.acts-tool-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(30, 64, 175, 0.12);
}
.acts-tool-icon { font-size: 2rem; }
.acts-tool-card h3 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--acts-primary-dark);
}
.acts-tool-card p {
  margin: 0;
  color: var(--acts-text-muted);
  font-size: 0.92rem;
}
.acts-tool-arrow {
  position: absolute;
  top: 28px; right: 28px;
  font-size: 1.3rem;
  color: var(--acts-primary);
  transition: transform 0.2s;
}
.acts-tool-card:hover .acts-tool-arrow { transform: translateX(4px); }

/* ---------- Testimonials ---------- */
.acts-testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.acts-testi-card {
  background: white;
  border: 1px solid var(--acts-border);
  border-radius: var(--acts-radius);
  padding: 32px 28px;
  transition: border-color 0.2s;
}
.acts-testi-card:hover { border-color: var(--acts-primary-light); }
.acts-testi-body {
  font-size: 0.98rem;
  color: var(--acts-text);
  margin: 0 0 20px;
  line-height: 1.7;
}
.acts-testi-meta {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--acts-border);
  padding-top: 14px;
}
.acts-testi-meta strong { color: var(--acts-primary-dark); font-size: 0.98rem; }
.acts-testi-meta span { color: var(--acts-text-muted); font-size: 0.85rem; margin-top: 2px; }

/* ---------- Final CTA ---------- */
.acts-cta-final {
  text-align: center;
  padding: 90px 24px;
  background: linear-gradient(135deg, var(--acts-primary-dark), var(--acts-primary));
  color: white;
}
.acts-cta-final h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  margin: 0 0 12px;
  font-weight: 800;
}
.acts-cta-final p {
  font-size: 1.1rem;
  margin: 0 0 32px;
  opacity: 0.9;
}
.acts-cta-final .acts-btn-primary {
  background: var(--acts-accent);
  color: #0F172A;
}
.acts-cta-final .acts-btn-primary:hover { background: white; }

/* ---------- Footer ---------- */
.acts-footer {
  background: var(--acts-bg-dark);
  color: #CBD5E1;
  padding: 56px 24px 32px;
}
.acts-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.acts-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.2rem;
  font-weight: 800;
  color: white;
  margin-bottom: 10px;
}
.acts-footer-tag { color: #94A3B8; font-size: 0.95rem; margin: 0 0 24px; }
.acts-footer-links {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.acts-footer-links a {
  color: #CBD5E1;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s;
}
.acts-footer-links a:hover { color: var(--acts-accent); }
.acts-footer-copy {
  color: #64748B;
  font-size: 0.82rem;
  margin: 0;
}

/* ---------- Section Tag (Eyebrow) ---------- */
.acts-section-tag {
  display: inline-block;
  padding: 5px 14px;
  background: rgba(30, 64, 175, 0.08);
  color: var(--acts-primary);
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 16px;
}
.acts-section-tag.dark {
  background: rgba(245, 158, 11, 0.18);
  color: var(--acts-accent);
}
.acts-section-head h2 br { display: inline; }

/* ---------- 2. PROBLEM ---------- */
.acts-problem { background: var(--acts-bg); }
.acts-problem-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 56px;
}
.acts-problem-card {
  background: white;
  border: 2px solid var(--acts-border);
  border-radius: var(--acts-radius);
  padding: 32px 22px;
  text-align: center;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.acts-problem-card:hover {
  transform: translateY(-4px);
  border-color: var(--acts-accent);
  box-shadow: 0 12px 32px rgba(245, 158, 11, 0.12);
}
.acts-problem-icon { font-size: 2.4rem; margin-bottom: 12px; }
.acts-problem-card h3 {
  font-size: 1.1rem;
  margin: 0 0 8px;
  color: var(--acts-primary-dark);
}
.acts-problem-card p {
  font-size: 0.9rem;
  color: var(--acts-text-muted);
  margin: 0;
  line-height: 1.55;
}
.acts-problem-summary {
  text-align: center;
  padding: 28px 24px;
  background: linear-gradient(135deg, var(--acts-bg-alt), white);
  border: 2px dashed var(--acts-primary-light);
  border-radius: var(--acts-radius);
  max-width: 720px;
  margin: 0 auto;
}
.acts-problem-summary p {
  font-size: 1.3rem;
  color: var(--acts-primary-dark);
  margin: 0;
  font-weight: 600;
}
.acts-problem-summary strong { color: var(--acts-accent-dark); }

/* ---------- 3. SOLUTION (Flow) — 기존 acts-flow 위에 보강 ---------- */
.acts-flow-card {
  border-top: 4px solid var(--acts-primary);
}
.acts-flow-quote {
  text-align: center;
  margin: 56px auto 0;
  max-width: 720px;
  font-size: 1.2rem;
  color: var(--acts-primary-dark);
  font-weight: 600;
  font-style: italic;
}
.acts-flow-quote strong { color: var(--acts-accent-dark); font-style: normal; }

/* ---------- 4. HOW IT WORKS ---------- */
.acts-how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.acts-how-card {
  background: white;
  border: 2px solid var(--acts-border);
  border-radius: var(--acts-radius);
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.acts-how-card:hover {
  transform: translateY(-4px);
  border-color: var(--acts-primary);
  box-shadow: 0 12px 36px rgba(30, 64, 175, 0.12);
}
.acts-how-tag {
  font-size: 0.75rem;
  letter-spacing: 1px;
  font-weight: 700;
  color: var(--acts-primary-light);
  margin-bottom: 10px;
  text-transform: uppercase;
}
.acts-how-card h3 {
  font-size: 1.35rem;
  margin: 0 0 18px;
  color: var(--acts-primary-dark);
}
.acts-how-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  flex: 1;
}
.acts-how-card ul li {
  padding: 8px 0 8px 22px;
  position: relative;
  font-size: 0.92rem;
  color: var(--acts-text);
  line-height: 1.5;
}
.acts-how-card ul li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--acts-accent);
  font-weight: 700;
}
.acts-how-summary {
  padding: 14px 16px;
  background: var(--acts-bg-alt);
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--acts-primary-dark);
  text-align: center;
}

/* ---------- 5. IMPACT ---------- */
.acts-impact {
  background: linear-gradient(135deg, var(--acts-primary-dark) 0%, var(--acts-primary) 50%, #312E81 100%);
  color: white;
  padding: 110px 24px;
  position: relative;
  overflow: hidden;
}
.acts-impact::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 30% 20%, rgba(245, 158, 11, 0.18), transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(59, 130, 246, 0.20), transparent 50%);
  pointer-events: none;
}
.acts-impact-inner {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}
.acts-impact h2 {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 900;
  margin: 0 0 48px;
  line-height: 1.2;
}
.acts-impact-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.acts-impact-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 26px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  backdrop-filter: blur(8px);
  min-width: 110px;
}
.acts-impact-step span { font-size: 2.4rem; }
.acts-impact-step strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: white;
}
.acts-impact-arrow {
  font-size: 1.6rem;
  color: var(--acts-accent);
  font-weight: 700;
}
.acts-impact-statements {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 1.15rem;
}
.acts-impact-statements li {
  color: rgba(255, 255, 255, 0.92);
}
.acts-impact-statements strong { color: var(--acts-accent); }

/* ---------- 6. ECONOMY ---------- */
.acts-economy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}
.acts-economy-card {
  background: white;
  border: 2px solid var(--acts-border);
  border-radius: var(--acts-radius);
  padding: 36px 28px;
  text-align: center;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.acts-economy-card:hover {
  transform: translateY(-4px);
  border-color: var(--acts-accent);
  box-shadow: 0 12px 32px rgba(245, 158, 11, 0.15);
}
.acts-economy-icon { font-size: 2.6rem; margin-bottom: 14px; }
.acts-economy-card h3 {
  font-size: 1.2rem;
  margin: 0 0 10px;
  color: var(--acts-primary-dark);
}
.acts-economy-card p {
  font-size: 0.95rem;
  color: var(--acts-text-muted);
  margin: 0;
}
.acts-economy-quote {
  text-align: center;
  font-size: 1.25rem;
  color: var(--acts-primary-dark);
  font-weight: 600;
  font-style: italic;
}
.acts-economy-quote strong { color: var(--acts-accent-dark); font-style: normal; }

/* ---------- 7. COMMUNITY & DAO ---------- */
.acts-dao { background: var(--acts-bg-alt); max-width: none; padding-left: 24px; padding-right: 24px; }
.acts-dao-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.acts-dao-card {
  background: white;
  border-radius: var(--acts-radius);
  padding: 36px 28px;
  text-align: center;
  border: 2px solid transparent;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.acts-dao-card:hover {
  transform: translateY(-4px);
  border-color: var(--acts-primary-light);
  box-shadow: 0 12px 36px rgba(30, 64, 175, 0.12);
}
.acts-dao-icon { font-size: 2.6rem; margin-bottom: 14px; }
.acts-dao-card h3 {
  font-size: 1.2rem;
  margin: 0 0 10px;
  color: var(--acts-primary-dark);
}
.acts-dao-card p {
  font-size: 0.95rem;
  color: var(--acts-text-muted);
  margin: 0;
}

/* ---------- 8. ROADMAP ---------- */
.acts-roadmap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
}
.acts-roadmap-card {
  background: white;
  border: 2px solid var(--acts-border);
  border-radius: var(--acts-radius);
  padding: 36px 22px 28px;
  text-align: center;
  position: relative;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.acts-roadmap-card:hover {
  transform: translateY(-4px);
  border-color: var(--acts-primary);
  box-shadow: 0 12px 32px rgba(30, 64, 175, 0.12);
}
.acts-roadmap-line {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
}
.acts-roadmap-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--acts-primary), var(--acts-primary-light));
  color: white;
  font-weight: 800;
  font-size: 1.05rem;
  box-shadow: 0 6px 18px rgba(30, 64, 175, 0.35);
}
.acts-roadmap-phase {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 1px;
  font-weight: 700;
  color: var(--acts-accent-dark);
  margin: 16px 0 8px;
  text-transform: uppercase;
}
.acts-roadmap-card h3 {
  font-size: 1.15rem;
  margin: 0 0 10px;
  color: var(--acts-primary-dark);
}
.acts-roadmap-card p {
  font-size: 0.88rem;
  color: var(--acts-text-muted);
  margin: 0;
  line-height: 1.55;
}

/* ---------- 9. FINAL CTA ---------- */
.acts-cta-final {
  background: linear-gradient(135deg, #0F172A 0%, var(--acts-primary-dark) 100%);
  color: white;
  padding: 110px 24px;
  text-align: center;
}
.acts-cta-final-inner {
  max-width: 820px;
  margin: 0 auto;
}
.acts-cta-final h2 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 900;
  margin: 0 0 18px;
  line-height: 1.15;
}
.acts-cta-final > .acts-cta-final-inner > p {
  font-size: 1.15rem;
  opacity: 0.9;
  margin: 0 0 36px;
}
.acts-cta-final .acts-hero-cta { margin-bottom: 36px; }
.acts-cta-final .acts-btn-primary {
  background: var(--acts-accent);
  color: #0F172A;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.35);
}
.acts-cta-final .acts-btn-primary:hover { background: white; }
.acts-cta-final .acts-btn-secondary {
  background: rgba(255, 255, 255, 0.10);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.30);
  box-shadow: none;
}
.acts-cta-final .acts-btn-secondary:hover {
  background: white;
  color: var(--acts-primary-dark);
  border-color: white;
}
.acts-cta-final-quote {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.7;
  margin: 0;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.acts-cta-final-quote strong { color: var(--acts-accent); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .acts-nav-menu { display: none; }
  .acts-section { padding: 72px 20px; }
  .acts-flow-grid,
  .acts-problem-grid,
  .acts-how-grid,
  .acts-economy-grid,
  .acts-dao-grid,
  .acts-roadmap-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .acts-hero { padding: 130px 20px 70px; }
  .acts-hero-stats { gap: 24px; }
  .acts-cta-final { padding: 72px 20px; }
  .acts-impact { padding: 80px 20px; }
  .acts-impact-flow { gap: 8px; }
  .acts-impact-step { min-width: 84px; padding: 14px 16px; }
  .acts-impact-step span { font-size: 1.8rem; }
  .acts-impact-arrow { font-size: 1.2rem; }
  .acts-roadmap-line { top: -18px; }
  .acts-roadmap-dot { width: 38px; height: 38px; font-size: 0.95rem; }
}
@media (max-width: 600px) {
  .acts-hero-cta { flex-direction: column; align-items: stretch; }
  .acts-btn-primary.large, .acts-btn-secondary.large { width: 100%; }
  .acts-problem-summary p { font-size: 1.1rem; }
  .acts-flow-quote, .acts-economy-quote { font-size: 1.05rem; }
  .acts-impact-statements { font-size: 1rem; }
  .acts-section-head h2 { font-size: 1.6rem; }
}
/* ActsSite scoped styles — all selectors prefixed with .acts-site */
.acts-site {
  --bg: #FAFBFF;
  --bg-soft: #F0F4FF;
  --card: rgba(255,255,255,0.85);
  --card-strong: rgba(255,255,255,0.95);
  --line: rgba(30,64,175,0.12);
  --text: #1E293B;
  --muted: #64748B;
  --green: #059669;
  --green-2: #1E40AF;
  --blue: #3B82F6;
  --gold: #D97706;
  --danger: #DC2626;
  --shadow: 0 4px 24px rgba(30,64,175,0.08);
  --radius: 24px;
  --radius-sm: 16px;
  --max: 1180px;

  box-sizing: border-box;
  font-family: Inter, Pretendard, Apple SD Gothic Neo, Noto Sans KR, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 20% 10%, rgba(59,130,246,0.06), transparent 25%),
    radial-gradient(circle at 85% 20%, rgba(5,150,105,0.05), transparent 22%),
    radial-gradient(circle at 50% 85%, rgba(217,119,6,0.04), transparent 20%),
    linear-gradient(180deg, #FAFBFF, #F0F4FF 40%, #FAFBFF 100%);
  min-height: 100vh;
}
.acts-site *, .acts-site *::before, .acts-site *::after { box-sizing: border-box; }
.acts-site a { color: inherit; text-decoration: none; }
.acts-site img { max-width: 100%; display: block; }
.acts-site .container { width: min(calc(100% - 32px), var(--max)); margin: 0 auto; }
.acts-site .section { padding: 56px 0; position: relative; }
.acts-site .badge {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); background: rgba(30,64,175,0.04);
  padding: 10px 14px; border-radius: 999px; color: var(--green-2); font-size: 14px;
}
.acts-site .kicker { color: #1E40AF; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 13px; }
.acts-site h1, .acts-site h2, .acts-site h3 { margin: 0 0 14px; line-height: 1.12; }
.acts-site h1 { font-size: clamp(40px, 6vw, 76px); letter-spacing: -0.04em; }
.acts-site h2 { font-size: clamp(30px, 4vw, 48px); letter-spacing: -0.03em; }
.acts-site h3 { font-size: clamp(20px, 2.3vw, 28px); }
.acts-site p { color: var(--muted); line-height: 1.75; margin: 0; }
.acts-site .lead { font-size: clamp(17px, 2vw, 21px); max-width: 780px; }
.acts-site .grid { display: grid; gap: 24px; }
.acts-site .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.acts-site .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.acts-site .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.acts-site .card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}
.acts-site .card.soft { background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); }
.acts-site .card:hover { transform: translateY(-3px); transition: .25s ease; }
.acts-site .hero { padding: 26px 0 88px; min-height: 100svh; display: flex; align-items: center; }
.acts-site .nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250,251,255,0.85); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(30,64,175,0.08);
}
.acts-site .nav-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 74px;
}
.acts-site .brand { display: flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: 0.02em; }
.acts-site .brand-mark {
  width: 38px; height: 38px; border-radius: 14px;
  background: linear-gradient(135deg, #1E40AF, #6C5CE7);
  box-shadow: 0 10px 30px rgba(30,64,175,0.2);
}
.acts-site .nav-links { display: flex; gap: 18px; flex-wrap: wrap; }
.acts-site .nav-links a { color: var(--muted); font-size: 14px; font-weight: 500; }
.acts-site .nav-cta { display: flex; gap: 10px; }
.acts-site .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 20px; border-radius: 14px; font-weight: 700; border: 1px solid transparent;
  transition: .2s ease; cursor: pointer;
}
.acts-site .btn.primary { background: linear-gradient(135deg, #1E40AF, #6C5CE7); color: #fff; }
.acts-site .btn.secondary { background: rgba(30,64,175,0.04); border-color: var(--line); color: var(--text); }
.acts-site .btn.link { color: #1E40AF; padding: 0; min-height: auto; }
.acts-site .hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 28px; align-items: center; }
.acts-site .hero-points { display: grid; gap: 12px; margin-top: 22px; }
.acts-site .hero-points .point {
  padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,0.7);
}
.acts-site .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.acts-site .mockup {
  position: relative; overflow: hidden; min-height: 540px;
  background: linear-gradient(180deg, rgba(30,64,175,0.04), rgba(108,92,231,0.03));
}
.acts-site .glow { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .3; }
.acts-site .glow.g1 { width: 180px; height: 180px; background: rgba(59,130,246,0.2); top: -30px; right: -20px; }
.acts-site .glow.g2 { width: 220px; height: 220px; background: rgba(108,92,231,0.15); bottom: -40px; left: -40px; }
.acts-site .mini-ui { position: relative; z-index: 2; display: grid; gap: 16px; }
.acts-site .pill-row { display: flex; gap: 10px; flex-wrap: wrap; }
.acts-site .pill { padding: 10px 12px; border-radius: 999px; background: rgba(30,64,175,0.04); border: 1px solid var(--line); font-size: 14px; }
.acts-site .pill.active { background: linear-gradient(135deg, rgba(30,64,175,0.12), rgba(108,92,231,0.1)); color: #1E40AF; border-color: rgba(30,64,175,0.3); }
.acts-site .preview {
  display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 16px;
}
.acts-site .preview-card, .acts-site .preview-panel {
  background: rgba(255,255,255,0.8); border: 1px solid var(--line); border-radius: 22px; padding: 20px;
}
.acts-site .preview-card .label { color: #1E40AF; font-size: 13px; font-weight: 700; }
.acts-site .preview-card .big { font-size: 28px; font-weight: 800; margin-top: 6px; }
.acts-site .section-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 28px; }
.acts-site .visual-box {
  border: 1px dashed rgba(30,64,175,0.18);
  border-radius: 22px; background: rgba(30,64,175,0.02);
  min-height: 220px; padding: 18px; display: flex; align-items: center; justify-content: center;
}
.acts-site .diagram { width: 100%; }
.acts-site .steps { counter-reset: step; display: grid; gap: 18px; }
.acts-site .step {
  display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: start;
  padding: 18px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255,255,255,0.7);
}
.acts-site .step-no {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(30,64,175,0.12), rgba(108,92,231,0.1));
  font-weight: 800; font-size: 20px; color: #1E40AF;
}
.acts-site .table-wrap { overflow-x: auto; }
.acts-site table { width: 100%; border-collapse: collapse; min-width: 760px; }
.acts-site th, .acts-site td { padding: 16px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.acts-site th { color: var(--green-2); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
.acts-site .link-grid a.card { display: block; }
.acts-site .kpi { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.acts-site .kpi .pill { background: rgba(30,64,175,0.06); }
.acts-site .footer { padding: 40px 0 70px; border-top: 1px solid rgba(30,64,175,0.1); }
.acts-site .note { font-size: 13px; color: #64748B; }
.acts-site .timeline { display: grid; gap: 12px; }
.acts-site .timeline .line { padding: 18px; border-left: 3px solid rgba(30,64,175,0.4); background: rgba(30,64,175,0.03); border-radius: 0 18px 18px 0; }
.acts-site .cta-strip {
  padding: 24px; border-radius: 26px; border: 1px solid rgba(30,64,175,0.15);
  background: linear-gradient(135deg, rgba(30,64,175,0.06), rgba(108,92,231,0.04));
}
.acts-site .page-hero { padding: 80px 0 44px; }
.acts-site .breadcrumb { color: var(--muted); font-size: 14px; display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.acts-site .tag-list { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.acts-site .tag { border: 1px solid var(--line); border-radius: 999px; padding: 7px 11px; font-size: 12px; color: #1E40AF; }
.acts-site .content-example { border-left: 3px solid rgba(217,119,6,0.5); padding-left: 14px; margin-top: 14px; }
.acts-site .figure-block {
  display: grid; gap: 14px; margin-top: 28px;
}
.acts-site .figure-frame {
  border: 1px dashed rgba(30,64,175,0.18);
  border-radius: 22px; overflow: hidden;
  background: rgba(30,64,175,0.02);
}
.acts-site .figure-frame img {
  width: 100%; height: auto; min-height: 220px; object-fit: cover;
  background: linear-gradient(135deg, rgba(30,64,175,0.06), rgba(108,92,231,0.06));
}
.acts-site .figure-caption {
  font-size: 13px; color: var(--muted); line-height: 1.7;
}
.acts-site .placeholder-note {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 999px;
  border: 1px solid var(--line); color: #1E40AF; font-size: 12px;
  background: rgba(30,64,175,0.03);
}
.acts-site .anchor-menu { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.acts-site .anchor-menu a { font-size: 14px; color: #1E40AF; }
.acts-site .faq-item summary { cursor: pointer; padding: 14px; font-weight: 700; }
.acts-site .faq-item[open] summary { color: #1E40AF; }
.acts-site .faq-item p { padding: 0 14px 14px; }

@media (max-width: 980px) {
  .acts-site .hero-grid, .acts-site .grid-2, .acts-site .grid-3, .acts-site .grid-4, .acts-site .preview { grid-template-columns: 1fr; }
  .acts-site .nav-links { display: none; }
  .acts-site .hero { min-height: auto; }
  .acts-site .mockup { min-height: auto; }
}
@media (max-width: 640px) {
  .acts-site .section { padding: 40px 0; }
  .acts-site .nav-inner { min-height: 66px; }
  .acts-site .step { grid-template-columns: 1fr; }
}

/* === Stage system (content stages + game stages) === */
.acts-site .stage-menu { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.acts-site .stage-menu a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(30,64,175,0.04); color: #1E40AF; font-size: 13px; }
.acts-site .stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.acts-site .stat-card { padding: 20px; border-radius: 20px; border: 1px solid var(--line); background: rgba(255,255,255,0.7); }
.acts-site .quick-links { display: grid; gap: 10px; margin-top: 14px; }
.acts-site .quick-links a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,0.7); color: var(--text); }
.acts-site .roadmap { display: grid; gap: 14px; }
.acts-site .roadmap-item { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: start; padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255,255,255,0.7); }
.acts-site .roadmap-step { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-weight: 800; font-size: 18px; color: #1E40AF; background: linear-gradient(135deg, rgba(30,64,175,0.12), rgba(108,92,231,0.1)); }
.acts-site .highlight-box { padding: 24px; border-radius: 22px; border: 1px solid rgba(30,64,175,0.15); background: linear-gradient(135deg, rgba(30,64,175,0.06), rgba(108,92,231,0.04)); }
.acts-site .mini-note { font-size: 13px; color: var(--muted); margin-top: 10px; }

/* === Index page extra styles === */
.acts-site .hero-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; }
.acts-site .hero-kpi { text-align: center; padding: 18px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255,255,255,0.7); }
.acts-site .hero-kpi .num { font-size: 28px; font-weight: 800; }
.acts-site .hero-kpi .lab { font-size: 12px; color: var(--muted); margin-top: 4px; }
.acts-site .problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.acts-site .problem-card { padding: 28px 22px; border-radius: 22px; border: 1px solid rgba(220,38,38,0.2); background: rgba(220,38,38,0.04); }
.acts-site .problem-icon { font-size: 32px; margin-bottom: 12px; }
.acts-site .diff-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; margin-bottom: 14px; }
.acts-site .diff-old { padding: 18px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255,255,255,0.5); text-align: center; color: var(--muted); font-size: 15px; }
.acts-site .diff-new { padding: 18px; border-radius: 18px; border: 1px solid rgba(30,64,175,0.2); background: rgba(30,64,175,0.05); text-align: center; font-size: 15px; font-weight: 600; }
.acts-site .diff-arrow { font-size: 22px; color: #1E40AF; }
.acts-site .content-type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.acts-site .ct-card { padding: 22px 18px; border-radius: 22px; border: 1px solid var(--line); background: rgba(255,255,255,0.7); }
.acts-site .ct-icon { font-size: 28px; margin-bottom: 10px; }
.acts-site .ct-card h4 { font-size: 15px; font-weight: 700; margin: 0 0 8px; }
.acts-site .scenario-steps { display: grid; gap: 8px; }
.acts-site .sc-step { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,0.7); }
.acts-site .sc-no { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #1E40AF; background: linear-gradient(135deg, rgba(30,64,175,0.12), rgba(108,92,231,0.1)); }
.acts-site .role-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.acts-site .role-card { padding: 24px; border-radius: 22px; border: 1px solid var(--line); background: rgba(255,255,255,0.7); }
.acts-site .role-card h4 { font-size: 16px; margin-bottom: 8px; }
.acts-site .role-card ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.acts-site .partner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.acts-site .partner-card { padding: 26px 22px; border-radius: 22px; border: 1px solid var(--line); background: rgba(255,255,255,0.7); }
.acts-site .cta-hero { padding: 80px 0; text-align: center; }
.acts-site .mega-cta { max-width: 840px; margin: 0 auto; }
.acts-site .cta-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 32px; }
.acts-site .faq { display: grid; gap: 14px; }
.acts-site .faq-item { padding: 22px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255,255,255,0.7); }
.acts-site .faq-item summary { font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; padding: 0; }
.acts-site .faq-item summary::after { content: '+'; color: #1E40AF; }
.acts-site details[open] summary::after { content: '–'; }
.acts-site .faq-body { margin-top: 14px; color: var(--muted); line-height: 1.75; }

@media (max-width: 980px) {
  .acts-site .hero-kpis, .acts-site .problem-grid, .acts-site .content-type-grid,
  .acts-site .role-cards, .acts-site .partner-grid, .acts-site .stat-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .acts-site .hero-kpis, .acts-site .problem-grid, .acts-site .content-type-grid,
  .acts-site .role-cards, .acts-site .partner-grid, .acts-site .stat-grid { grid-template-columns: 1fr; }
  .acts-site .diff-row { grid-template-columns: 1fr; }
  .acts-site .diff-arrow { display: none; }
  .acts-site .roadmap-item { grid-template-columns: 1fr; }
  .acts-site .sc-step { grid-template-columns: 1fr; }
}
/* ActsSiteIndex — 3대 OS Landing (al- namespace) */

.al-index {
  --al-primary: #1E40AF;
  --al-primary-light: #3B82F6;
  --al-primary-dark: #1E3A8A;
  --al-accent: #6C5CE7;
  --al-mint: #00CEC9;
  --al-gold: #F59E0B;
  --al-bg: #FFFFFF;
  --al-bg-alt: #F0F4FF;
  --al-bg-dark: #0F172A;
  --al-text: #1E293B;
  --al-text-light: #64748B;
  --al-text-white: #F8FAFC;
  --al-border: #E2E8F0;
  --al-radius: 16px;
  --al-radius-sm: 10px;
  --al-shadow: 0 4px 24px rgba(30,64,175,.08);
  --al-shadow-lg: 0 8px 40px rgba(30,64,175,.12);
  font-family: 'Noto Sans KR', 'Inter', -apple-system, sans-serif;
  color: var(--al-text);
  line-height: 1.6;
}
.al-index a { color: inherit; text-decoration: none; }
.al-c { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* Buttons */
.al-b {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 28px; border-radius: var(--al-radius-sm);
  font-size: 15px; font-weight: 600; cursor: pointer; border: none; transition: all .2s;
}
.al-b--pri { background: var(--al-primary); color: #fff; }
.al-b--pri:hover { background: var(--al-primary-dark); transform: translateY(-1px); }
.al-b--hero {
  background: linear-gradient(135deg, var(--al-primary), var(--al-accent));
  color: #fff; padding: 16px 36px; font-size: 16px; border-radius: 14px;
  box-shadow: 0 4px 20px rgba(30,64,175,.25);
}
.al-b--hero:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(30,64,175,.35); }
.al-b--out { background: transparent; color: var(--al-primary); border: 2px solid var(--al-primary); }
.al-b--out:hover { background: var(--al-bg-alt); }
.al-b--sm { padding: 8px 18px; font-size: 13px; }
.al-b--full { width: 100%; }
.al-b--lg { padding: 18px 48px; font-size: 18px; }

/* Hero */
.al-hero {
  position: relative; min-height: 60vh; display: flex;
  align-items: center; justify-content: center; text-align: center;
  padding: 56px 24px 40px; overflow: hidden;
}
.al-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.al-orb {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: .10;
  animation: al-fl 8s ease-in-out infinite;
}
.al-orb-1 { width: 500px; height: 500px; background: var(--al-primary); top: -10%; right: -10%; }
.al-orb-2 { width: 400px; height: 400px; background: var(--al-accent); bottom: -5%; left: -5%; animation-delay: -3s; }
.al-orb-3 { width: 300px; height: 300px; background: var(--al-mint); top: 40%; left: 50%; animation-delay: -5s; }
.al-hero-ct { position: relative; z-index: 1; max-width: 720px; }
.al-badge-hero {
  display: inline-block; background: var(--al-bg-alt); color: var(--al-primary);
  padding: 8px 20px; border-radius: 100px; font-size: 14px; font-weight: 600;
  margin-bottom: 24px; border: 1px solid rgba(30,64,175,.1);
}
.al-hero-t { font-size: 48px; font-weight: 800; line-height: 1.2; margin-bottom: 20px; }
.al-hero-acc {
  background: linear-gradient(135deg, var(--al-primary), var(--al-accent));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.al-hero-d { font-size: 17px; color: var(--al-text-light); line-height: 1.7; margin-bottom: 36px; }
.al-hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 36px; }
.al-stats { display: flex; gap: 40px; justify-content: center; }
.al-st { display: flex; flex-direction: column; align-items: center; }
.al-st-n { font-size: 32px; font-weight: 800; color: var(--al-primary); }
.al-st-l { font-size: 13px; color: var(--al-text-light); margin-top: 4px; }

/* Section */
.al-sec { padding: 56px 0; }
.al-sec--alt { background: var(--al-bg-alt); }
.al-sh { text-align: center; margin-bottom: 32px; }
.al-badge {
  display: inline-block; background: rgba(30,64,175,.06); color: var(--al-primary);
  padding: 6px 16px; border-radius: 100px; font-size: 13px; font-weight: 600; margin-bottom: 16px;
}
.al-st-t { font-size: 36px; font-weight: 800; margin-bottom: 12px; }
.al-st-d { font-size: 16px; color: var(--al-text-light); max-width: 600px; margin: 0 auto; }

/* Flow */
.al-fc { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.al-fcard {
  background: #fff; border-radius: var(--al-radius); padding: 36px 28px;
  text-align: center; width: 220px; box-shadow: var(--al-shadow); transition: transform .2s;
}
.al-fcard:hover { transform: translateY(-4px); }
.al-fi { font-size: 40px; margin-bottom: 12px; }
.al-fcard h3 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.al-fcard p { font-size: 14px; color: var(--al-text-light); margin-bottom: 12px; }
.al-fos {
  display: inline-block; background: var(--al-bg-alt); color: var(--al-primary);
  padding: 4px 12px; border-radius: 100px; font-size: 12px; font-weight: 600;
}
.al-fcard--1 { border-top: 3px solid var(--al-primary); }
.al-fcard--2 { border-top: 3px solid var(--al-accent); }
.al-fcard--3 { border-top: 3px solid var(--al-mint); }
.al-farrow { font-size: 28px; color: var(--al-text-light); font-weight: 700; }

/* OS Tabs */
.al-ost { display: flex; gap: 12px; justify-content: center; margin-bottom: 36px; flex-wrap: wrap; }
.al-ostab {
  display: flex; align-items: center; gap: 10px; padding: 14px 28px;
  border-radius: var(--al-radius-sm); border: 2px solid var(--al-border);
  background: #fff; cursor: pointer; font-size: 15px; font-weight: 600; transition: all .2s;
}
.al-ostab.active { border-color: var(--al-primary); background: rgba(30,64,175,.04); box-shadow: 0 2px 12px rgba(30,64,175,.1); }
.al-ostab-i { font-size: 22px; }
.al-osd {
  background: #fff; border-radius: var(--al-radius); padding: 40px;
  box-shadow: var(--al-shadow-lg); transition: all .3s; display: none;
}
.al-osd.active { display: block; }
.al-osd--blue { border-left: 4px solid var(--al-primary); }
.al-osd--purple { border-left: 4px solid var(--al-accent); }
.al-osd--mint { border-left: 4px solid var(--al-mint); }
.al-osh { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.al-osi { font-size: 48px; }
.al-os-title { font-size: 24px; font-weight: 700; }
.al-os-sub { font-size: 14px; color: var(--al-text-light); }
.al-osq {
  font-size: 17px; color: var(--al-accent); font-style: italic; margin-bottom: 28px;
  padding-left: 16px; border-left: 3px solid var(--al-accent);
}
.al-osf { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.al-osfi {
  display: flex; gap: 14px; padding: 16px; background: var(--al-bg-alt);
  border-radius: var(--al-radius-sm); transition: transform .2s;
}
.al-osfi:hover { transform: translateX(4px); }
.al-osfi-i { font-size: 28px; flex-shrink: 0; }
.al-osfi h4 { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.al-osfi p { font-size: 13px; color: var(--al-text-light); }
.al-os-more { display: flex; justify-content: flex-end; margin-top: 20px; }

/* Layers */
.al-lg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 36px; }
.al-lc {
  background: #fff; border-radius: var(--al-radius); padding: 32px 24px;
  text-align: center; cursor: pointer; box-shadow: var(--al-shadow);
  transition: all .2s; border: 2px solid transparent;
}
.al-lc:hover, .al-lc.active { transform: translateY(-4px); box-shadow: var(--al-shadow-lg); }
.al-lc.active.blue { border-color: var(--al-primary); }
.al-lc.active.purple { border-color: var(--al-accent); }
.al-lc.active.mint { border-color: var(--al-mint); }
.al-li { font-size: 40px; margin-bottom: 16px; }
.al-lt { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.al-ld { font-size: 14px; color: var(--al-text-light); line-height: 1.6; margin-bottom: 14px; }
.al-ltn {
  display: inline-block; background: var(--al-bg-alt); color: var(--al-primary);
  padding: 4px 14px; border-radius: 100px; font-size: 12px; font-weight: 600;
}
.al-lfl {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  font-size: 14px; color: var(--al-text-light); padding: 20px;
  background: var(--al-bg-alt); border-radius: var(--al-radius-sm);
}
.al-lfl .arrow { color: var(--al-primary); font-weight: 700; }

/* Store */
.al-sg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 40px; }
.al-sc {
  background: #fff; border-radius: var(--al-radius); padding: 32px 24px;
  text-align: center; box-shadow: var(--al-shadow); transition: transform .2s;
}
.al-sc:hover { transform: translateY(-4px); }
.al-sci { font-size: 40px; margin-bottom: 14px; }
.al-sc h3 { font-size: 17px; font-weight: 700; margin-bottom: 10px; }
.al-sc p { font-size: 13px; color: var(--al-text-light); line-height: 1.6; }
.al-ap {
  background: #fff; border-radius: var(--al-radius); padding: 32px; box-shadow: var(--al-shadow);
}
.al-ap h3 { text-align: center; font-size: 20px; font-weight: 700; margin-bottom: 24px; color: var(--al-primary); }
.al-api { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.al-apit {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; background: var(--al-bg-alt); border-radius: var(--al-radius-sm);
}
.al-apa { font-size: 14px; font-weight: 500; }
.al-app { font-size: 14px; font-weight: 700; color: var(--al-gold); }

/* Loops */
.al-lpg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 32px; }
.al-lpc {
  background: #fff; border-radius: var(--al-radius); padding: 28px 20px;
  text-align: center; box-shadow: var(--al-shadow); transition: all .3s; border: 2px solid transparent;
}
.al-lpc.active { border-color: var(--al-primary); transform: translateY(-6px); box-shadow: var(--al-shadow-lg); }
.al-lpi { font-size: 36px; margin-bottom: 12px; }
.al-lpn { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.al-lpd { font-size: 13px; color: var(--al-text-light); margin-bottom: 12px; }
.al-lpo {
  display: inline-block; background: var(--al-bg-alt); color: var(--al-primary);
  padding: 4px 12px; border-radius: 100px; font-size: 11px; font-weight: 600;
}
.al-lcy {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-size: 14px; font-weight: 600; padding: 16px; background: var(--al-bg-alt);
  border-radius: var(--al-radius-sm);
}
.al-lcy .arrow { color: var(--al-primary); font-weight: 700; font-size: 18px; }

/* Pricing */
.al-pg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.al-pc {
  background: #fff; border-radius: var(--al-radius); padding: 36px 28px;
  box-shadow: var(--al-shadow); text-align: center; border: 2px solid transparent; transition: transform .2s;
}
.al-pc:hover { transform: translateY(-4px); }
.al-pc.popular { border-color: var(--al-primary); box-shadow: var(--al-shadow-lg); transform: scale(1.04); }
.al-pb {
  display: inline-block; background: var(--al-bg-alt); padding: 6px 16px;
  border-radius: 100px; font-size: 13px; font-weight: 600; margin-bottom: 20px;
}
.al-pb.popular { background: var(--al-primary); color: #fff; }
.al-pa { font-size: 36px; font-weight: 800; margin-bottom: 24px; }
.al-pp { font-size: 15px; color: var(--al-text-light); }
.al-pl { list-style: none; text-align: left; margin-bottom: 28px; padding: 0; }
.al-pl li { padding: 10px 0; font-size: 14px; border-bottom: 1px solid var(--al-border); }
.al-pl li:last-child { border-bottom: none; }
.al-pl li::before { content: '\2713  '; color: var(--al-primary); font-weight: 700; }

/* CTA */
.al-cta {
  background: linear-gradient(135deg, var(--al-primary), var(--al-accent));
  color: var(--al-text-white); text-align: center; padding: 56px 24px;
  border-radius: var(--al-radius); margin: 0 24px;
}
.al-cta-t { font-size: 36px; font-weight: 800; margin-bottom: 16px; }
.al-cta-d { font-size: 17px; opacity: .85; max-width: 540px; margin: 0 auto 40px; line-height: 1.7; }

/* Explore links */
.al-explore {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 24px;
}

@keyframes al-fl {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-30px) scale(1.05); }
}

@media (max-width: 768px) {
  .al-hero-t { font-size: 32px; }
  .al-stats { gap: 20px; }
  .al-st-n { font-size: 24px; }
  .al-st-t { font-size: 28px; }
  .al-fc { flex-direction: column; }
  .al-farrow { transform: rotate(90deg); }
  .al-ost { flex-direction: column; align-items: stretch; }
  .al-osf { grid-template-columns: 1fr; }
  .al-osd { padding: 24px; }
  .al-lg { grid-template-columns: 1fr; }
  .al-sg { grid-template-columns: 1fr 1fr; }
  .al-api { grid-template-columns: 1fr; }
  .al-lpg { grid-template-columns: 1fr 1fr; }
  .al-pg { grid-template-columns: 1fr; }
  .al-pc.popular { transform: none; }
  .al-cta-t { font-size: 28px; }
  .al-cta { margin: 0; border-radius: 0; }
}
@media (max-width: 480px) {
  .al-hero { padding: 40px 16px 28px; }
  .al-hero-t { font-size: 26px; }
  .al-sg, .al-lpg { grid-template-columns: 1fr; }
  .al-hero-cta { flex-direction: column; align-items: center; }
}
.entry-hook-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  text-decoration: none;
  color: white;
  background: linear-gradient(135deg, var(--hook-bg), var(--hook-accent));
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.10);
  margin: 12px 0 20px;
  transition: transform 0.15s, box-shadow 0.2s;
  cursor: pointer;
}
.entry-hook-banner:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15);
}
.entry-hook-banner .hook-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
}
.entry-hook-banner .hook-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.entry-hook-banner .hook-eyebrow {
  font-size: 0.72rem;
  opacity: 0.85;
  font-weight: 600;
  letter-spacing: 0.4px;
}
.entry-hook-banner .hook-title {
  font-size: 1rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entry-hook-banner .hook-arrow {
  font-size: 1.2rem;
  opacity: 0.9;
  transition: transform 0.2s;
}
.entry-hook-banner:hover .hook-arrow { transform: translateX(3px); }

@media (max-width: 480px) {
  .entry-hook-banner { padding: 14px 14px; gap: 12px; }
  .entry-hook-banner .hook-title { font-size: 0.95rem; }
}
.install-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: installFadeIn 0.2s ease;
}

@keyframes installFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.install-modal {
  width: 100%;
  max-width: 380px;
  background: #fff;
  border-radius: 20px;
  padding: 32px 24px 24px;
  position: relative;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
  animation: installSlideUp 0.25s ease;
}

@keyframes installSlideUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.install-modal__close {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: #F3F4F6;
  color: #555;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.install-modal__close:hover { background: #E5E7EB; }

.install-modal__icon {
  width: 84px;
  height: 84px;
  margin: 0 auto 16px;
  border-radius: 22px;
  background: linear-gradient(135deg, #7C6DEA 0%, #5B4CCB 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 32px rgba(108, 92, 231, 0.28);
}

.install-modal__title {
  text-align: center;
  font-size: 1.35rem;
  font-weight: 800;
  color: #1A1A2E;
  margin: 0 0 6px;
}

.install-modal__subtitle {
  text-align: center;
  color: #777;
  font-size: 0.9rem;
  margin: 0 0 24px;
  line-height: 1.5;
}

.install-modal__steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}

.install-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 14px;
}

.install-step__num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #6C5CE7;
  color: #fff;
  font-weight: 800;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.install-step__body {
  flex: 1;
  min-width: 0;
}

.install-step__title {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-weight: 700;
  font-size: 0.92rem;
  color: #1A1A2E;
  line-height: 1.4;
}

.install-step__desc {
  margin-top: 3px;
  font-size: 0.78rem;
  color: #888;
  line-height: 1.5;
}

.install-modal__ok {
  width: 100%;
  padding: 14px;
  background: #6C5CE7;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.install-modal__ok:hover { background: #5B4CCB; }
.ie-seg {
  display: inline-flex;
  background: #F5F6F8;
  border-radius: 10px;
  padding: 2px;
  gap: 2px;
}
.ie-seg__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 40px;
  min-width: 40px;
  padding: 0 0.5rem;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: #555;
  font-size: 0.85rem;
  cursor: pointer;
}
.ie-seg__btn.is-active {
  background: #FFFFFF;
  color: #6C5CE7;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.ie-seg__label { display: none; }

@media (min-width: 640px) {
  .ie-seg__label { display: inline; }
}
/* EditToolbar — mobile-first */
.ie-toolbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: #FFFFFF;
  border-bottom: 1px solid #E5E7EB;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  min-height: 44px;
}
.ie-toolbar__left,
.ie-toolbar__right {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.ie-toolbar__center {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: #555;
}
.ie-save-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #00B894;
  transition: background 0.2s;
}
.ie-save-dot.is-pending { background: #FDCB6E; animation: ie-pulse 1.2s ease-in-out infinite; }
.ie-save-dot.is-dirty   { background: #FF7675; }
.ie-save-label { white-space: nowrap; }

.ie-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0.25rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #1A1A2E;
  font-size: 0.85rem;
  cursor: pointer;
}
.ie-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ie-btn:hover:not(:disabled) { background: #F5F6F8; }
.ie-btn__text { display: none; }
.ie-btn--primary { background: #6C5CE7; color: #fff; border-color: #6C5CE7; }
.ie-btn--primary:hover:not(:disabled) { background: #5B4ED6; }
.ie-btn--primary.is-pulse { animation: ie-pulse 1.6s ease-in-out infinite; }
.ie-btn--accent  { background: #00B894; color: #fff; border-color: #00B894; }
.ie-btn--accent:hover:not(:disabled) { background: #00A383; }
.ie-btn--ghost   { color: #999; }

@keyframes ie-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(0.95); }
}

/* Tablet+ */
@media (min-width: 640px) {
  .ie-toolbar { padding: 0.6rem 1rem; min-height: 48px; }
  .ie-btn__text { display: inline; }
}
.ie-block-ctrls {
  position: absolute;
  top: -10px; right: 8px;
  display: flex; gap: 4px;
  z-index: 2;
}
.ie-block-ctrls__btn,
.ie-block-ctrls__handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  min-width: 28px;
  border-radius: 8px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  color: #555;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.ie-block-ctrls__handle { cursor: grab; }
.ie-block-ctrls__btn:hover { color: #6C5CE7; border-color: #6C5CE7; }
.ie-block-ctrls__btn--danger:hover { color: #FF7675; border-color: #FF7675; }
.ie-vis-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid #E5E7EB;
  border-radius: 999px;
  background: #FFFFFF;
  color: #555;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.ie-vis-badge:hover { border-color: #6C5CE7; color: #6C5CE7; }
.ie-hidden-label {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: #FF7675;
  color: #FFFFFF;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(255,118,117,0.3);
}
.ie-block { position: relative; }

.ie-block--edit {
  position: relative;
  padding: 0.5rem;
  border: 2px dashed transparent;
  border-radius: 12px;
  transition: border-color 0.15s, background 0.15s, opacity 0.15s, filter 0.15s;
}
.ie-block--edit:hover { border-color: #3B82F6; background: rgba(59, 130, 246, 0.04); }
.ie-block--edit.is-focused { border: 2px solid #3B82F6; background: rgba(59, 130, 246, 0.06); }
.ie-block--edit.is-hidden-on-page { opacity: 0.45; filter: grayscale(0.3); }
.ie-block--edit.is-dragging { opacity: 0.5; }
.ie-block--edit.is-over { border-color: #6C5CE7; border-style: solid; }

.ie-block__tools {
  position: absolute;
  top: -10px; left: 8px;
  display: flex; gap: 4px;
  z-index: 2;
}
.ie-block__body { position: relative; }
.ie-delete-toast {
  position: fixed;
  left: 50%;
  bottom: 90px;
  transform: translateX(-50%);
  z-index: 1300;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #1A1A2E;
  color: #FFFFFF;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.25);
  font-size: 0.85rem;
  animation: ie-toast-in 0.22s ease-out;
}
@keyframes ie-toast-in { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.ie-delete-toast__icon {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(255,118,117,0.2);
  color: #FF7675;
}
.ie-delete-toast__text { display: flex; flex-direction: column; line-height: 1.2; }
.ie-delete-toast__text strong { font-weight: 700; }
.ie-delete-toast__text span { font-size: 0.72rem; color: #B4B4C4; }
.ie-delete-toast__restore {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 10px;
  min-height: 32px;
  border: 1px solid rgba(255,255,255,0.2);
  background: transparent;
  color: #FFFFFF;
  border-radius: 10px;
  font-size: 0.78rem;
  cursor: pointer;
}
.ie-delete-toast__restore:hover { background: rgba(255,255,255,0.08); }
.ie-delete-toast__ring {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: conic-gradient(#FF7675 var(--p, 0deg), rgba(255,255,255,0.12) 0);
}

@media (min-width: 768px) {
  .ie-delete-toast { bottom: 30px; }
}
.cps-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 2000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: cpsFade 0.18s ease;
}

.cps-sheet {
  width: 100%;
  max-width: 460px;
  background: #FFFFFF;
  border-radius: 20px 20px 0 0;
  padding: 10px 18px 22px;
  box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.18);
  animation: cpsSlideUp 0.22s ease;
}

.cps-sheet__handle {
  width: 40px;
  height: 4px;
  border-radius: 4px;
  background: #E5E7EB;
  margin: 2px auto 12px;
}

.cps-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.cps-title {
  font-size: 1rem;
  font-weight: 800;
  color: #1A1A2E;
  margin: 0;
}

.cps-close {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: #F3F4F6;
  color: #555;
  cursor: pointer;
  transition: background 0.15s ease;
}
.cps-close:hover { background: #E5E7EB; }

.cps-preview {
  height: 48px;
  border-radius: 12px;
  border: 1px solid #E5E7EB;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  background: repeating-conic-gradient(#F3F4F6 0% 25%, #FFFFFF 25% 50%) 0 0 / 16px 16px;
}
.cps-preview__label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #1A1A2E;
  background: rgba(255, 255, 255, 0.85);
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.02em;
}

.cps-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: #F3F4F6;
  border-radius: 10px;
  margin-bottom: 12px;
}

.cps-tab {
  flex: 1;
  padding: 7px 0;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #555;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: background 0.15s ease, color 0.15s ease;
}
.cps-tab.is-active {
  background: #FFFFFF;
  color: #1A1A2E;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.cps-preset__row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.cps-section-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #777;
  margin: 6px 0 4px;
}

.cps-swatch {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #E5E7EB;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1A1A2E;
  transition: transform 0.12s ease, border-color 0.15s ease;
}
.cps-swatch:hover { transform: scale(1.06); }
.cps-swatch.is-selected {
  border-color: #6C5CE7;
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.18);
}

.cps-swatch--rainbow {
  background: conic-gradient(
    from 0deg,
    #FF6B6B, #FDCB6E, #A3F7BF, #55EFC4,
    #74B9FF, #A29BFE, #FD79A8, #FF6B6B
  );
  color: #FFFFFF;
}

.cps-custom {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cps-wheel {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 4px auto 4px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #FFFFFF 0%, transparent 65%),
    conic-gradient(
      from 0deg,
      hsl(0, 100%, 50%),
      hsl(60, 100%, 50%),
      hsl(120, 100%, 50%),
      hsl(180, 100%, 50%),
      hsl(240, 100%, 50%),
      hsl(300, 100%, 50%),
      hsl(360, 100%, 50%)
    );
  border: 1px solid #E5E7EB;
  cursor: crosshair;
  touch-action: none;
}

.cps-wheel__indicator {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid #1A1A2E;
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.cps-slider {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: #555;
}
.cps-slider span { min-width: 42px; font-weight: 600; }
.cps-slider input {
  flex: 1;
  accent-color: #6C5CE7;
}

.cps-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.cps-btn {
  flex: 1;
  padding: 11px 14px;
  border: none;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.15s ease, transform 0.12s ease;
}
.cps-btn--ghost {
  background: #F3F4F6;
  color: #555;
}
.cps-btn--ghost:hover { background: #E5E7EB; }
.cps-btn--primary {
  background: #6C5CE7;
  color: #FFFFFF;
}
.cps-btn--primary:hover { background: #5A4CD9; }
.cps-btn:active { transform: translateY(1px); }

@keyframes cpsFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes cpsSlideUp {
  from { transform: translateY(16px); opacity: 0.6; }
  to { transform: translateY(0); opacity: 1; }
}

@media (max-width: 480px) {
  .cps-sheet { max-width: 100%; padding: 8px 14px 18px; }
  .cps-wheel { width: 200px; height: 200px; }
  .cps-swatch { width: 36px; height: 36px; }
}
.beo-root {
  position: relative;
  margin: 10px 0;
  border-radius: 14px;
  transition: box-shadow 0.15s ease, transform 0.12s ease;
}
.beo-root.is-expanded {
  box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.32), 0 4px 18px rgba(108, 92, 231, 0.12);
}

.beo-body {
  position: relative;
  border-radius: 12px;
  transition: background 0.2s ease;
}

.beo-body--collapsed {
  height: 48px;
  overflow: hidden;
  border: 1px dashed rgba(108, 92, 231, 0.4);
  background: rgba(108, 92, 231, 0.04);
}

.beo-collapsed-preview {
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #555;
}
.beo-collapsed-title {
  display: inline-block;
  max-width: 240px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---- 좌측 상하 화살표 ---- */
.beo-arrows {
  position: absolute;
  left: -34px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 3;
}

.beo-arrow {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.88);
  color: #F8FAFC;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.beo-arrow:hover:not(:disabled) { background: rgba(15, 23, 42, 0.96); }
.beo-arrow:disabled { opacity: 0.35; cursor: not-allowed; }

/* ---- 우측 편집/삭제 ---- */
.beo-actions {
  position: absolute;
  right: 6px;
  top: 6px;
  display: inline-flex;
  gap: 4px;
  z-index: 3;
}

.beo-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  color: #1A1A2E;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: transform 0.12s ease, background 0.15s ease, color 0.15s ease;
}
.beo-icon:hover { transform: translateY(-1px); }
.beo-icon.is-active {
  background: #6C5CE7;
  color: #FFFFFF;
  border-color: #6C5CE7;
}
.beo-icon--danger { color: #E11D48; }
.beo-icon--danger:hover { background: #FEE2E2; }

/* ---- 편집 폼 ---- */
.beo-form {
  margin-top: 8px;
  padding: 14px;
  background: rgba(108, 92, 231, 0.04);
  border: 1px solid rgba(108, 92, 231, 0.2);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: beoFormSlide 0.2s ease;
}

.beo-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  color: #555;
}
.beo-field__label {
  font-weight: 600;
  letter-spacing: 0.02em;
}
.beo-field input {
  padding: 9px 12px;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.95rem;
  background: #FFFFFF;
  color: #1A1A2E;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.beo-field input:focus {
  border-color: #6C5CE7;
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.15);
}

.beo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.beo-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: #555;
  cursor: pointer;
}
.beo-toggle input {
  width: 16px;
  height: 16px;
  accent-color: #6C5CE7;
  margin: 0;
}

.beo-color-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #FFFFFF;
  color: #1A1A2E;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.beo-color-btn:hover {
  border-color: #6C5CE7;
  background: rgba(108, 92, 231, 0.04);
}

.beo-color-btn__swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #FFFFFF;
}

.beo-done-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #6C5CE7;
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
}
.beo-done-btn:hover { background: #5A4CD9; transform: translateY(-1px); }

@keyframes beoFormSlide {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- 모바일 ---- */
@media (max-width: 480px) {
  .beo-arrows {
    left: 4px;
    top: 6px;
    transform: none;
    flex-direction: row;
    gap: 2px;
  }
  .beo-arrow { width: 24px; height: 24px; }
  .beo-actions { top: 6px; right: 6px; }
  .beo-icon { width: 26px; height: 26px; }
}
.peo-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 8px auto 14px;
  max-width: 360px;
  width: 100%;
}

.peo-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: rgba(108, 92, 231, 0.08);
  color: #6C5CE7;
  border: 1px dashed rgba(108, 92, 231, 0.5);
  border-radius: 18px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
}
.peo-toggle:hover {
  background: rgba(108, 92, 231, 0.14);
  transform: translateY(-1px);
}

.peo-panel {
  width: 100%;
  padding: 12px 14px;
  background: #FFFFFF;
  border: 1px solid rgba(108, 92, 231, 0.18);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
  animation: peoSlide 0.2s ease;
}

.peo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.peo-row__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #555;
}

.peo-row--file input[type="file"] {
  font-size: 0.8rem;
  color: #555;
  max-width: 200px;
}

.peo-color-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: #F3F4F6;
  color: #1A1A2E;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.peo-color-btn:hover {
  border-color: #6C5CE7;
  background: rgba(108, 92, 231, 0.04);
}
.peo-color-btn__swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #FFFFFF;
}

.peo-positions {
  display: inline-flex;
  gap: 4px;
}
.peo-pos {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 5px 10px;
  background: #F3F4F6;
  color: #555;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.peo-pos.is-active {
  background: #6C5CE7;
  color: #FFFFFF;
  border-color: #6C5CE7;
}

@keyframes peoSlide {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* ============================================
   WobbleBlock — iOS 홈화면 스타일 흔들림 래퍼
   ============================================ */

.wobble-block {
  position: relative;
  transform-origin: center center;
}

@keyframes wobble {
  0%, 100% { transform: rotate(-1.5deg); }
  50%      { transform: rotate(1.5deg); }
}

.wobble-block.wobble-active {
  animation: wobble 0.15s ease-in-out infinite;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border-radius: 14px;
  z-index: 10;
  /* 모바일 long-press 기본 컨텍스트 메뉴/선택 방지 */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}

/* 두 번째 블록부터 애니메이션 타이밍을 어긋나게 하여 자연스럽게 보이도록 */
.wobble-block.wobble-active:nth-child(even) {
  animation-delay: -0.075s;
  animation-direction: reverse;
}

.wobble-block.wobble-drag-ghost {
  opacity: 0.4;
  animation: none;
  transform: scale(1.03);
}

.wobble-block.wobble-drop-target {
  outline: 2px dashed #3B82F6;
  outline-offset: 4px;
  border-radius: 14px;
}

/* 좌상단 빨간 `-` 삭제 뱃지 */
.wobble-delete-badge {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #FF3B30;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  z-index: 20;
  animation: wobble-badge-pop 0.2s ease-out;
  /* 부모 wobble 애니메이션 반대로 회전 보정 → 뱃지는 덜 흔들림 */
  transform-origin: center center;
}

.wobble-delete-badge:active {
  transform: scale(0.9);
}

@keyframes wobble-badge-pop {
  0%   { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
/* ============================================
   WobbleOverlay — wobble 모드 dim + 상단 안내바
   ============================================ */

.wobble-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 900;
  /* 블록(z-index:10) 보다 위, 상단바(z-index:950) 보다 아래 */
  animation: wobble-overlay-fade 0.2s ease-out;
}

@keyframes wobble-overlay-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.wobble-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 950;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  padding: 12px 16px calc(12px + env(safe-area-inset-top, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  animation: wobble-topbar-slide 0.2s ease-out;
}

@keyframes wobble-topbar-slide {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

.wobble-topbar__hint {
  font-size: 14px;
  font-weight: 500;
  opacity: 0.9;
}

.wobble-topbar__done {
  background: #3B82F6;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.wobble-topbar__done:hover {
  background: #2563EB;
}

.wobble-topbar__done:active {
  transform: scale(0.97);
}

/* wobble 모드 활성 시 원래 사이트 요소가 배경에 묻히도록 body 헬퍼 */
body.wobble-mode-active {
  overflow: hidden;
  /* 다른 fixed UI (editToolbar, 하단 4버튼 바) 위에 dim 이 덮어주도록 */
}
/* BottomNavBar — 편집 모드 전용 하단 고정 4탭 */

.bottom-nav-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: stretch;
  min-height: 56px;
  padding: 4px 0 calc(4px + env(safe-area-inset-bottom, 0px));
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
  color: #e2e8f0;
  font-family: inherit;
}

.bottom-nav-bar__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: transparent;
  border: none;
  color: #cbd5e1;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 4px;
  transition: color 0.15s ease, transform 0.15s ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.bottom-nav-bar__tab:hover {
  color: #ffffff;
}

.bottom-nav-bar__tab:active {
  transform: scale(0.96);
}

.bottom-nav-bar__tab:focus-visible {
  box-shadow: inset 0 0 0 2px #3B82F6;
  border-radius: 10px;
}

.bottom-nav-bar__tab--active {
  color: #3B82F6;
}

.bottom-nav-bar__tab--active .bottom-nav-bar__label {
  font-weight: 700;
}

.bottom-nav-bar__label {
  line-height: 1;
  letter-spacing: -0.01em;
}

/* 사용자 컨텐츠가 하단바 뒤에 숨지 않도록 — 편집 모드에서만 스페이서 */
body.inline-edit-active .front-page--edit {
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}
/* HalfScreenDashboard — 하단 50vh 슬라이드업 빠른 편집 패널 */

.dashboard-dim-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 1090;
}

.dashboard-dim-overlay--open {
  opacity: 1;
  pointer-events: auto;
}

.half-screen-dashboard {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  height: 50vh;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #E2E8F0;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.35);
  transform: translateY(100%);
  transition: transform 0.3s ease-out, height 0.12s linear;
  will-change: transform, height;
  font-family: inherit;
}

.half-screen-dashboard--open {
  transform: translateY(0);
}

.half-screen-dashboard__handle-wrap {
  padding: 8px 0 4px;
  display: flex;
  justify-content: center;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.half-screen-dashboard__handle-wrap:active { cursor: grabbing; }

.half-screen-dashboard__handle {
  width: 42px;
  height: 4px;
  background: rgba(148, 163, 184, 0.6);
  border-radius: 2px;
}

.half-screen-dashboard__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 16px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

.half-screen-dashboard__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #F8FAFC;
  letter-spacing: -0.01em;
}

.half-screen-dashboard__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(148, 163, 184, 0.14);
  border: none;
  border-radius: 10px;
  color: #E2E8F0;
  cursor: pointer;
  transition: background 0.15s ease;
}

.half-screen-dashboard__close:hover {
  background: rgba(148, 163, 184, 0.25);
}

/* 탭 */
.half-screen-dashboard__tabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  overflow-x: auto;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
  -webkit-overflow-scrolling: touch;
}

.hsd-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  color: #94A3B8;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  font-family: inherit;
}

.hsd-tab:hover {
  color: #E2E8F0;
  background: rgba(148, 163, 184, 0.1);
}

.hsd-tab--active {
  color: #ffffff;
  background: #3B82F6;
  border-color: #3B82F6;
}

/* 본문 스크롤 영역 */
.half-screen-dashboard__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px 24px;
  -webkit-overflow-scrolling: touch;
}

.hsd-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hsd-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hsd-section__count {
  font-size: 0.78rem;
  color: #94A3B8;
  font-weight: 600;
}

/* 필드 */
.hsd-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hsd-field__label {
  font-size: 0.78rem;
  color: #94A3B8;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.hsd-input {
  width: 100%;
  padding: 10px 12px;
  background: #0F172A;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 10px;
  color: #E2E8F0;
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hsd-input:focus {
  border-color: #3B82F6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.hsd-input--textarea {
  resize: vertical;
  min-height: 60px;
  line-height: 1.4;
}

/* 버튼 */
.hsd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease;
  font-family: inherit;
}

.hsd-btn:active { transform: scale(0.97); }

.hsd-btn--primary {
  background: #3B82F6;
  color: #ffffff;
}
.hsd-btn--primary:hover { background: #2563EB; }

.hsd-btn--outline {
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #E2E8F0;
}
.hsd-btn--outline:hover { background: rgba(148, 163, 184, 0.12); }

/* 아바타 */
.hsd-avatar-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hsd-avatar-preview {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  background: #1E293B;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148, 163, 184, 0.22);
  flex-shrink: 0;
}

.hsd-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hsd-avatar-fallback {
  font-size: 1.2rem;
  font-weight: 700;
  color: #94A3B8;
}

/* 링크 목록 */
.hsd-link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hsd-link-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(30, 41, 59, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
}

.hsd-link-item__body {
  flex: 1;
  min-width: 0;
}

.hsd-link-item__title {
  font-size: 0.88rem;
  font-weight: 600;
  color: #F1F5F9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hsd-link-item__url {
  font-size: 0.72rem;
  color: #64748B;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hsd-link-item__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.hsd-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  color: #CBD5E1;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
  font-family: inherit;
}

.hsd-icon-btn:hover:not(:disabled) {
  background: rgba(148, 163, 184, 0.15);
}

.hsd-icon-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.hsd-icon-btn--danger {
  color: #FCA5A5;
  border-color: rgba(248, 113, 113, 0.35);
}

.hsd-icon-btn--danger:hover {
  background: rgba(248, 113, 113, 0.15);
}

/* 체크박스 */
.hsd-check {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.hsd-check input { display: none; }
.hsd-check__box {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid rgba(148, 163, 184, 0.5);
  background: #0F172A;
  position: relative;
  transition: all 0.15s ease;
}
.hsd-check input:checked + .hsd-check__box {
  background: #3B82F6;
  border-color: #3B82F6;
}
.hsd-check input:checked + .hsd-check__box::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* 스위치 */
.hsd-switch {
  display: inline-flex;
  cursor: pointer;
}
.hsd-switch input { display: none; }
.hsd-switch__track {
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.35);
  position: relative;
  transition: background 0.15s ease;
}
.hsd-switch__track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform 0.18s ease;
}
.hsd-switch input:checked + .hsd-switch__track {
  background: #3B82F6;
}
.hsd-switch input:checked + .hsd-switch__track::after {
  transform: translateX(16px);
}

/* 행(라벨 + 컨트롤) */
.hsd-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(30, 41, 59, 0.5);
  border-radius: 10px;
  color: #E2E8F0;
  font-size: 0.88rem;
}

/* 칩 */
.hsd-chip-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.hsd-chip {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.14);
  border: 1px solid transparent;
  color: #CBD5E1;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  font-family: inherit;
}

.hsd-chip:hover {
  background: rgba(148, 163, 184, 0.22);
  color: #F8FAFC;
}

.hsd-chip--active {
  background: #3B82F6;
  color: #ffffff;
  border-color: #3B82F6;
}

/* 테마 스와치 */
.hsd-swatch-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.hsd-swatch {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 2px solid rgba(148, 163, 184, 0.22);
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.hsd-swatch:hover { transform: scale(1.08); }

.hsd-swatch--active {
  border-color: #3B82F6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
}

/* 탭 순서 리스트 */
.hsd-tab-order-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hsd-tab-order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(30, 41, 59, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  color: #E2E8F0;
  font-size: 0.85rem;
}

/* 빈 힌트 */
.hsd-empty {
  padding: 24px 16px;
  text-align: center;
  color: #64748B;
  font-size: 0.85rem;
  background: rgba(30, 41, 59, 0.4);
  border-radius: 12px;
  border: 1px dashed rgba(148, 163, 184, 0.2);
}

/* PC 우측 패널 변형 (≥900px) */
@media (min-width: 900px) {
  .half-screen-dashboard {
    left: auto;
    right: 0;
    bottom: 0;
    top: 0;
    width: 400px;
    height: 100vh !important;
    border-radius: 20px 0 0 20px;
    border-left: 1px solid rgba(148, 163, 184, 0.22);
    border-top: none;
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
  }
  .half-screen-dashboard--open {
    transform: translateX(0);
  }
  .half-screen-dashboard__handle-wrap {
    display: none;
  }
}
/* EditPanel — 라이트 테마 편집 패널 */

.ep-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: #1E293B;
  font-family: 'Noto Sans KR', sans-serif;
  background: #ffffff;
}

/* ── Header ── */
.ep-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
  border-bottom: 1px solid #E5E7EB;
}

.ep-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #1E293B;
}

.ep-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: #64748B;
  cursor: pointer;
  transition: background 0.15s ease;
}
.ep-close-btn:hover { background: #F1F5F9; }

/* ── Body ── */
.ep-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 16px 24px;
  -webkit-overflow-scrolling: touch;
}

/* ── Section ── */
.ep-section {
  padding: 16px 0;
  border-bottom: 1px solid #F1F5F9;
}
.ep-section:last-child { border-bottom: none; }

.ep-section-title {
  margin: 0 0 12px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #1E293B;
}

/* ── Toggle Group (배경 / 업로드) ── */
.ep-toggle-group {
  display: flex;
  gap: 0;
  background: #F1F5F9;
  border-radius: 10px;
  padding: 3px;
  margin-bottom: 12px;
}

.ep-toggle-btn {
  flex: 1;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #64748B;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}
.ep-toggle-btn--active {
  background: #6C5CE7;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(108, 92, 231, 0.3);
}

/* ── Background Grid ── */
.ep-bg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.ep-bg-thumb {
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.ep-bg-thumb:active { transform: scale(0.95); }

.ep-bg-thumb--active {
  border-color: #6C5CE7;
  box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.25);
}

.ep-bg-check {
  position: absolute;
  bottom: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #6C5CE7;
  color: #fff;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Upload Area ── */
.ep-upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
  border: 2px dashed #D1D5DB;
  border-radius: 12px;
  cursor: pointer;
  color: #94A3B8;
  font-size: 0.85rem;
  transition: border-color 0.15s ease, background 0.15s ease;
  position: relative;
}
.ep-upload-area:hover {
  border-color: #6C5CE7;
  background: #F5F3FF;
}

.ep-upload-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  opacity: 0.8;
}

/* ── Verse / Text Editing ── */
.ep-verse-preview {
  background: #F8FAFC;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
}

.ep-verse-textarea {
  width: 100%;
  border: none;
  background: transparent;
  color: #1E293B;
  resize: none;
  outline: none;
  font-family: inherit;
  line-height: 1.5;
  box-sizing: border-box;
}
.ep-verse-textarea::placeholder { color: #94A3B8; }

.ep-verse-ref-input {
  width: 100%;
  border: none;
  background: transparent;
  color: #94A3B8;
  font-size: 0.78rem;
  outline: none;
  margin-top: 4px;
  font-family: inherit;
}

/* ── Font Row ── */
.ep-font-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.ep-font-select-wrap {
  flex: 1;
  position: relative;
}

.ep-font-select {
  width: 100%;
  padding: 8px 28px 8px 10px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  background: #fff;
  color: #1E293B;
  font-size: 0.82rem;
  font-family: inherit;
  appearance: none;
  cursor: pointer;
  outline: none;
}
.ep-font-select:focus { border-color: #6C5CE7; }

.ep-font-select-icon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #94A3B8;
  pointer-events: none;
}

.ep-font-size-wrap {
  width: 64px;
  position: relative;
}

.ep-font-size {
  width: 100%;
  padding: 8px 22px 8px 10px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  background: #fff;
  color: #1E293B;
  font-size: 0.82rem;
  font-family: inherit;
  text-align: center;
  outline: none;
  -moz-appearance: textfield;
}
.ep-font-size::-webkit-inner-spin-button,
.ep-font-size::-webkit-outer-spin-button { -webkit-appearance: none; }
.ep-font-size:focus { border-color: #6C5CE7; }

/* ── Format Buttons ── */
.ep-format-row {
  display: flex;
  gap: 2px;
  align-items: center;
}

.ep-fmt-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  background: #fff;
  color: #64748B;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  font-family: inherit;
}
.ep-fmt-btn:hover { background: #F1F5F9; }
.ep-fmt-btn--active {
  background: #EDE9FE;
  color: #6C5CE7;
  border-color: #C4B5FD;
}

.ep-fmt-divider {
  width: 1px;
  height: 20px;
  background: #E5E7EB;
  margin: 0 4px;
}

.ep-color-btn {
  overflow: hidden;
}

.ep-color-dot {
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 3px;
  border-radius: 2px;
}

/* ── Photo Editor ── */
.ep-photo-editor {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}

.ep-photo-preview {
  position: relative;
  overflow: hidden;
  background: #F1F5F9;
  border: 3px solid #E5E7EB;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.ep-photo-preview:hover { border-color: #6C5CE7; }

.ep-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.15s ease;
}

.ep-photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: 4px;
  color: #94A3B8;
  font-size: 0.72rem;
}

.ep-photo-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.15s ease;
  color: #fff;
}
.ep-photo-preview:hover .ep-photo-overlay { opacity: 1; }

/* Photo Controls */
.ep-photo-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ep-control-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ep-control-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748B;
  min-width: 36px;
}

.ep-shape-btns {
  display: flex;
  gap: 4px;
}

.ep-shape-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  background: #fff;
  color: #64748B;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
.ep-shape-btn:hover { background: #F1F5F9; }
.ep-shape-btn--active {
  background: #EDE9FE;
  color: #6C5CE7;
  border-color: #C4B5FD;
}

.ep-size-slider {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.ep-slider {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: #E5E7EB;
  border-radius: 2px;
  outline: none;
}
.ep-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #6C5CE7;
  cursor: pointer;
}

.ep-size-value {
  font-size: 0.72rem;
  color: #94A3B8;
  min-width: 32px;
  text-align: right;
}

.ep-zoom-btns {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ep-zoom-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  background: #fff;
  color: #64748B;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ep-zoom-btn:hover { background: #F1F5F9; color: #6C5CE7; }

.ep-zoom-value {
  font-size: 0.78rem;
  color: #1E293B;
  min-width: 36px;
  text-align: center;
  font-weight: 600;
}

/* ── Fields (Light) ── */
.ep-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.ep-field:last-child { margin-bottom: 0; }

.ep-field__label {
  font-size: 0.78rem;
  color: #64748B;
  font-weight: 600;
}

.ep-input {
  width: 100%;
  padding: 10px 12px;
  background: #F8FAFC;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  color: #1E293B;
  font-size: 0.88rem;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ep-input:focus {
  border-color: #6C5CE7;
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.12);
}
.ep-input::placeholder { color: #94A3B8; }

/* ── Background Hidden Toggle ── */
.ep-bg-hidden-toggle {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.ep-toggle-checkbox {
  display: none;
}
.ep-toggle-switch {
  position: relative;
  width: 36px;
  height: 20px;
  background: #D1D5DB;
  border-radius: 10px;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.ep-toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 0.2s ease;
}
.ep-toggle-switch--on {
  background: #6C5CE7;
}
.ep-toggle-switch--on::after {
  transform: translateX(16px);
}
/* PagePanel — Page 탭 half-sheet 대시보드 */

.pp-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: #E2E8F0;
  font-family: inherit;
}

/* Header */
.pp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

.pp-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #F8FAFC;
  letter-spacing: -0.01em;
}

.pp-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: #3B82F6;
  border: none;
  border-radius: 10px;
  color: #ffffff;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.pp-add-btn:hover { background: #2563EB; }
.pp-add-btn:active { transform: scale(0.95); }

/* Sub-tabs */
.pp-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

.pp-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  color: #94A3B8;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  font-family: inherit;
}
.pp-tab:hover {
  color: #E2E8F0;
  background: rgba(148, 163, 184, 0.1);
}
.pp-tab--active {
  color: #ffffff;
  background: #3B82F6;
  border-color: #3B82F6;
}

/* Body scroll area */
.pp-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px 24px;
  -webkit-overflow-scrolling: touch;
}

/* Empty state */
.pp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 32px 16px;
  text-align: center;
}

.pp-empty-icon {
  color: #475569;
  margin-bottom: 4px;
}

.pp-empty-text {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #94A3B8;
}

.pp-empty-hint {
  margin: 0;
  font-size: 0.8rem;
  color: #64748B;
}

.pp-empty-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 10px 20px;
  background: #3B82F6;
  border: none;
  border-radius: 10px;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  font-family: inherit;
}
.pp-empty-btn:hover { background: #2563EB; }
.pp-empty-btn:active { transform: scale(0.97); }

/* Page list */
.pp-page-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Page card */
.pp-page-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(30, 41, 59, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 12px;
  transition: background 0.15s ease;
}
.pp-page-card:hover {
  background: rgba(30, 41, 59, 0.85);
}

/* Thumbnail */
.pp-page-thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  background: #1E293B;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148, 163, 184, 0.15);
}

.pp-page-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pp-page-thumb-placeholder {
  color: #475569;
}

/* Info */
.pp-page-info {
  flex: 1;
  min-width: 0;
}

.pp-page-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: #F1F5F9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pp-page-slug {
  font-size: 0.72rem;
  color: #3B82F6;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pp-page-date {
  font-size: 0.68rem;
  color: #64748B;
  margin-top: 1px;
}

/* Actions */
.pp-page-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.pp-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  color: #CBD5E1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.pp-icon-btn:hover {
  background: rgba(148, 163, 184, 0.2);
  color: #F8FAFC;
}
/* MorePanel — More (마이페이지) 탭 half-sheet 대시보드 */

.mp-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: #E2E8F0;
  font-family: inherit;
}

/* Header */
.mp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

.mp-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #F8FAFC;
  letter-spacing: -0.01em;
}

/* User profile card */
.mp-user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 16px;
  padding: 14px 14px;
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.mp-user-card:hover {
  background: rgba(30, 41, 59, 0.9);
}

.mp-user-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: #1E293B;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(148, 163, 184, 0.22);
}

.mp-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mp-user-avatar-fallback {
  font-size: 1.2rem;
  font-weight: 700;
  color: #94A3B8;
}

.mp-user-info {
  flex: 1;
  min-width: 0;
}

.mp-user-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #F1F5F9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-user-email {
  font-size: 0.75rem;
  color: #64748B;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-user-arrow {
  color: #64748B;
  flex-shrink: 0;
}

/* Body scroll area */
.mp-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 16px 24px;
  -webkit-overflow-scrolling: touch;
}

/* Menu list */
.mp-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mp-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 12px;
  background: transparent;
  border: none;
  border-radius: 12px;
  color: #E2E8F0;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
  font-family: inherit;
  text-align: left;
}
.mp-menu-item:hover {
  background: rgba(148, 163, 184, 0.08);
}
.mp-menu-item:active {
  background: rgba(148, 163, 184, 0.14);
}

.mp-menu-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mp-menu-label {
  flex: 1;
  min-width: 0;
}

.mp-menu-badge {
  font-size: 0.78rem;
  font-weight: 700;
  color: #F59E0B;
  background: rgba(245, 158, 11, 0.12);
  padding: 3px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

.mp-menu-arrow {
  color: #475569;
  flex-shrink: 0;
}

/* Logout button */
.mp-logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 16px;
  padding: 12px;
  background: transparent;
  border: 1px solid rgba(248, 113, 113, 0.3);
  border-radius: 12px;
  color: #FCA5A5;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  font-family: inherit;
}
.mp-logout-btn:hover {
  background: rgba(248, 113, 113, 0.08);
  border-color: rgba(248, 113, 113, 0.45);
}
.mp-logout-btn:active {
  background: rgba(248, 113, 113, 0.14);
}
/* ============================================
   ContentPalette — 콘텐츠 팔레트 (우측 슬라이드 패널)
   ============================================ */

/* 오버레이 배경 */
.cp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.cp-overlay.cp-overlay--open {
  opacity: 1;
  pointer-events: auto;
}

/* 패널 본체 */
.cp-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 280px;
  max-width: 85vw;
  height: 100%;
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 910;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.35);
}
.cp-panel.cp-panel--open {
  transform: translateX(0);
}

/* 패널 헤더 */
.cp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cp-header__title {
  font-size: 15px;
  font-weight: 700;
  color: #F1F5F9;
  letter-spacing: -0.2px;
}
.cp-header__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: #94A3B8;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.cp-header__close:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #E2E8F0;
}

/* 아이템 리스트 */
.cp-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px 80px;
  -webkit-overflow-scrolling: touch;
}

/* 개별 아이템 카드 */
.cp-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 6px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.cp-item:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.12);
}
.cp-item:active {
  transform: scale(0.97);
  box-shadow: 0 2px 12px rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.4);
}

/* 드래그 중 아이템 */
.cp-item.cp-item--dragging {
  opacity: 0.5;
  transform: scale(0.95);
}

/* 아이콘 영역 */
.cp-item__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
/* 아이콘 배경 색상은 인라인으로 제공 */

/* 라벨 */
.cp-item__label {
  font-size: 13px;
  font-weight: 600;
  color: #E2E8F0;
  letter-spacing: -0.1px;
}
.cp-item__desc {
  font-size: 11px;
  color: #64748B;
  margin-top: 1px;
}

/* 플로팅 + 버튼 (팔레트 열기/닫기) */
.cp-fab {
  position: fixed;
  bottom: 80px;
  right: 16px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #3B82F6, #6366F1);
  color: #fff;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 850;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.cp-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(59, 130, 246, 0.5);
}
.cp-fab:active {
  transform: scale(0.95);
}
.cp-fab.cp-fab--open {
  transform: rotate(45deg);
  background: linear-gradient(135deg, #EF4444, #F97316);
}
.cp-fab.cp-fab--open:hover {
  transform: rotate(45deg) scale(1.08);
}

/* 드래그 고스트 프리뷰 */
.cp-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(59, 130, 246, 0.9);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -50%);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.1s;
}
.cp-ghost.cp-ghost--visible {
  opacity: 1;
}

/* 모바일 반응형 */
@media (max-width: 480px) {
  .cp-panel {
    width: 260px;
  }
  .cp-fab {
    bottom: 72px;
    right: 12px;
    width: 44px;
    height: 44px;
  }
}
/* ============================================
   HomeBlock — 홈 화면 편집 블록 단위
   ============================================ */

.hb-wrapper {
  position: relative;
  border-radius: 14px;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
  margin-bottom: 10px;
}
.hb-wrapper:hover {
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.18);
}

/* 편집 모드 시 hover 강조 */
.hb-wrapper.hb-wrapper--editing {
  border-color: rgba(59, 130, 246, 0.15);
}
.hb-wrapper.hb-wrapper--editing:hover {
  border-color: rgba(59, 130, 246, 0.35);
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.12);
}

/* 접힌 상태 */
.hb-wrapper.hb-wrapper--collapsed .hb-body {
  display: none;
}

/* 드래그 타겟 */
.hb-wrapper.hb-wrapper--drop-target {
  outline: 2px dashed #3B82F6;
  outline-offset: 2px;
}

/* 드래그 중 */
.hb-wrapper.hb-wrapper--dragging {
  opacity: 0.4;
  transform: scale(0.97);
}

/* ---------- 상단 컨트롤바 ---------- */
.hb-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: rgba(15, 23, 42, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.2s, max-height 0.25s ease, padding 0.2s;
}
.hb-wrapper--editing .hb-controls {
  opacity: 1;
  max-height: 48px;
  padding: 6px 10px;
}

.hb-controls__left,
.hb-controls__right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.hb-ctrl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: #94A3B8;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}
.hb-ctrl-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #E2E8F0;
}
.hb-ctrl-btn:active {
  transform: scale(0.9);
}
.hb-ctrl-btn.hb-ctrl-btn--danger:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #F87171;
}

/* 색상 원형 버튼 */
.hb-color-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
}
.hb-color-dot:hover {
  transform: scale(1.15);
  border-color: rgba(255, 255, 255, 0.5);
}

/* 블록 타입 라벨 (컨트롤바 내) */
.hb-type-label {
  font-size: 10px;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 4px;
}

/* ---------- 블록 본체 ---------- */
.hb-body {
  padding: 14px;
  min-height: 48px;
}

/* ---- Profile 블록 ---- */
.hb-profile {
  display: flex;
  align-items: center;
  gap: 14px;
}
.hb-profile__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border: 2px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.hb-profile__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hb-profile__avatar-initial {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}
.hb-profile__info {
  flex: 1;
  min-width: 0;
}
.hb-profile__name {
  font-size: 15px;
  font-weight: 700;
  color: #F1F5F9;
  margin: 0 0 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hb-profile__bio {
  font-size: 12px;
  color: #94A3B8;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- AppFolder 블록 ---- */
.hb-app-folder {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.hb-app-folder__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.hb-app-folder__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.hb-app-folder__name {
  font-size: 10px;
  color: #94A3B8;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 56px;
}

/* ---- CardBox 블록 ---- */
.hb-card-box {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
}
.hb-card-box__title {
  font-size: 14px;
  font-weight: 700;
  color: #E2E8F0;
  margin: 0 0 6px;
}
.hb-card-box__content {
  font-size: 12px;
  color: #94A3B8;
  margin: 0;
  line-height: 1.5;
}

/* ---- StoreWidget 블록 ---- */
.hb-store {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(139, 92, 246, 0.12));
  border: 1px solid rgba(59, 130, 246, 0.15);
  cursor: pointer;
  transition: background 0.15s;
}
.hb-store:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(139, 92, 246, 0.18));
}
.hb-store__icon {
  font-size: 28px;
}
.hb-store__text {
  flex: 1;
}
.hb-store__title {
  font-size: 13px;
  font-weight: 700;
  color: #E2E8F0;
  margin: 0 0 2px;
}
.hb-store__desc {
  font-size: 11px;
  color: #94A3B8;
  margin: 0;
}
.hb-store__arrow {
  color: #64748B;
}

/* ---- ImageBox 블록 ---- */
.hb-image-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 2px dashed rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.hb-image-box:hover {
  border-color: rgba(59, 130, 246, 0.3);
  background: rgba(59, 130, 246, 0.05);
}
.hb-image-box__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #64748B;
}
.hb-image-box__placeholder-text {
  font-size: 12px;
}
.hb-image-box img {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
}

/* ---- Namecard 블록 ---- */
.hb-namecard {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hb-namecard__row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hb-namecard__label {
  font-size: 10px;
  color: #64748B;
  width: 40px;
  flex-shrink: 0;
}
.hb-namecard__value {
  font-size: 12px;
  color: #CBD5E1;
}

/* ---- Link 블록 ---- */
.hb-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.hb-link__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(59, 130, 246, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3B82F6;
  flex-shrink: 0;
}
.hb-link__text {
  flex: 1;
  min-width: 0;
}
.hb-link__title {
  font-size: 13px;
  font-weight: 600;
  color: #E2E8F0;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hb-link__url {
  font-size: 11px;
  color: #64748B;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Text 블록 ---- */
.hb-text {
  font-size: 13px;
  color: #CBD5E1;
  line-height: 1.6;
}
.hb-text--empty {
  color: #64748B;
  font-style: italic;
}

/* ---- Board 블록 ---- */
.hb-board {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hb-board__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.hb-board__title {
  font-size: 13px;
  font-weight: 700;
  color: #E2E8F0;
  margin: 0;
}
.hb-board__count {
  font-size: 11px;
  color: #64748B;
}
.hb-board__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}
.hb-board__row-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3B82F6;
  flex-shrink: 0;
}
.hb-board__row-text {
  font-size: 12px;
  color: #CBD5E1;
  flex: 1;
}
.hb-board__row-date {
  font-size: 10px;
  color: #64748B;
  flex-shrink: 0;
}

/* ---- 색상 팔레트 팝업 ---- */
.hb-color-popup {
  position: absolute;
  top: 42px;
  right: 10px;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  width: 160px;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  animation: hb-color-popup-in 0.15s ease-out;
}

@keyframes hb-color-popup-in {
  0% { opacity: 0; transform: translateY(-4px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.hb-color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s;
  padding: 0;
}
.hb-color-swatch:hover {
  transform: scale(1.15);
}
.hb-color-swatch.hb-color-swatch--active {
  border-color: #fff;
}
/* ============================================
   TargetSharePage — 타겟 쉐어페이지 (부부학교 등)
   HUB LINK 타겟 공유 페이지 전용 스타일
   ============================================ */

.tsp {
  width: 100%;
  min-height: 100vh;
  background: #FAFBFC;
  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #1E293B;
  overflow-x: hidden;
}

/* ── Hero / Cover Image ── */
.tsp-hero {
  position: relative;
  width: 100%;
  height: 280px;
  overflow: hidden;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.tsp-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tsp-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.45) 100%);
}

.tsp-hero__title {
  position: absolute;
  bottom: 24px;
  left: 20px;
  right: 20px;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.3;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* ── Social Bar ── */
.tsp-social-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid #F1F5F9;
}

.tsp-social-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  color: #64748B;
  font-size: 0.78rem;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  transition: all 0.15s;
  font-family: inherit;
}
.tsp-social-btn:hover { background: #F1F5F9; }
.tsp-social-btn--active { color: #EF4444; }
.tsp-social-btn svg { width: 18px; height: 18px; }

/* ── Content Container ── */
.tsp-content {
  max-width: 520px;
  margin: 0 auto;
  padding: 0 16px 120px;
}

/* ── Section Block ── */
.tsp-block {
  background: #fff;
  border-radius: 16px;
  margin-top: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  border: 1px solid #F1F5F9;
}

.tsp-block--no-bg {
  background: transparent;
  box-shadow: none;
  border: none;
}

/* ── Block Header (collapsible) ── */
.tsp-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
  position: relative;
  overflow: hidden;
}
.tsp-block__header:hover { background: #F8FAFC; }

/* ── 이미지 미리보기가 있는 헤더 ── */
.tsp-block__header--with-preview {
  min-height: 100px;
  padding: 20px 18px;
  border-radius: 14px 14px 0 0;
}
.tsp-block__header--with-preview:hover { background: transparent; }

.tsp-block__header-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.tsp-block__header-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.25) 0%,
    rgba(15, 23, 42, 0.70) 100%
  );
  z-index: 1;
}

.tsp-block__header--with-preview .tsp-block__header-left,
.tsp-block__header--with-preview > div:last-child {
  position: relative;
  z-index: 2;
}

.tsp-block__header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tsp-block__icon {
  font-size: 2.4rem;
}

.tsp-block__icon-img {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}

.tsp-block__title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #1E293B;
}
.tsp-block__title--on-image {
  color: #FFFFFF;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  font-size: 1rem;
}

.tsp-block__subtitle {
  font-size: 0.75rem;
  color: #94A3B8;
  margin-top: 2px;
}
.tsp-block__subtitle--on-image {
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.tsp-block__chevron {
  color: #94A3B8;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.tsp-block__chevron--open {
  transform: rotate(180deg);
}
.tsp-block__chevron--on-image {
  color: rgba(255, 255, 255, 0.9);
}

/* 이미지 위 편집 버튼 */
.tsp-edit-icon-btn--on-image {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}
.tsp-edit-icon-btn--on-image:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* ── 블록 순서 이동 버튼 ── */
.tsp-block__reorder-btns {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-right: 6px;
}
.tsp-reorder-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid #D1D5DB;
  border-radius: 4px;
  background: #F9FAFB;
  color: #6B7280;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s;
}
.tsp-reorder-btn:hover:not(:disabled) {
  background: #E5E7EB;
  color: #374151;
  border-color: #9CA3AF;
}
.tsp-reorder-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.tsp-reorder-btn--on-image {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}
.tsp-reorder-btn--on-image:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.35);
}

/* 이미지 미리보기 헤더 — 아이콘도 흰색으로 */
.tsp-block__header--with-preview .tsp-block__icon {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}
.tsp-block__header--with-preview .tsp-block__icon-img {
  border: 2px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ── Block Body ── */
.tsp-block__body {
  padding: 0 18px 18px;
}

.tsp-block__body--collapsed {
  display: none;
}

/* ── Intro Text ── */
.tsp-intro {
  font-size: 0.88rem;
  line-height: 1.7;
  color: #334155;
  white-space: pre-line;
}

.tsp-intro strong {
  color: #1E293B;
  font-weight: 700;
}

/* ── Link Card ── */
.tsp-link-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  text-decoration: none;
  color: #1E293B;
  transition: background 0.15s;
  border-top: 1px solid #F1F5F9;
}
.tsp-link-card:first-child { border-top: none; }
.tsp-link-card:hover { background: #F8FAFC; }

.tsp-link-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.tsp-link-card__icon--youtube { background: #FEE2E2; color: #DC2626; }
.tsp-link-card__icon--naver { background: #DCFCE7; color: #16A34A; }
.tsp-link-card__icon--kakao { background: #FEF9C3; color: #A16207; }
.tsp-link-card__icon--default { background: #EDE9FE; color: #6C5CE7; }
.tsp-link-card__icon--mother { background: #FCE7F3; color: #DB2777; }

.tsp-link-card__text {
  flex: 1;
  min-width: 0;
}

.tsp-link-card__label {
  font-size: 0.88rem;
  font-weight: 600;
  color: #1E293B;
}

.tsp-link-card__desc {
  font-size: 0.75rem;
  color: #94A3B8;
  margin-top: 2px;
}

.tsp-link-card__arrow {
  color: #CBD5E1;
  flex-shrink: 0;
}

/* ── Curriculum — 1열 세로 리스트 ── */
.tsp-curriculum-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tsp-curriculum-list__item {
  position: relative;
}

.tsp-curriculum-list__img {
  width: 100%;
  border-radius: 12px;
  background: #F1F5F9;
  border: 1px solid #E5E7EB;
  cursor: pointer;
  transition: transform 0.15s;
  object-fit: contain;
}
.tsp-curriculum-list__img:hover { transform: scale(1.01); }

.tsp-curriculum-list__delete {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.tsp-curriculum-list__add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  border: 2px dashed #D1D5DB;
  border-radius: 12px;
  color: #94A3B8;
  font-size: 0.85rem;
  cursor: pointer;
  background: #FAFBFC;
  transition: border-color 0.15s;
}
.tsp-curriculum-list__add:hover {
  border-color: #6C5CE7;
  color: #6C5CE7;
}

/* 기존 커리큘럼 그리드 (미사용 — 호환 유지) */
.tsp-curriculum-grid { display: none; }
.tsp-curriculum-img { display: none; }
.tsp-curriculum-placeholder { display: none; }

/* ── Gallery Grid ── */
.tsp-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.tsp-gallery-grid__cell {
  position: relative;
}

.tsp-gallery-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  background: #F1F5F9;
  cursor: pointer;
  transition: transform 0.15s;
}
.tsp-gallery-img:hover { transform: scale(1.03); }

.tsp-gallery-grid__delete {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0;
}

.tsp-gallery-more {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  background: #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748B;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #E5E7EB;
  transition: background 0.15s;
}
.tsp-gallery-more:hover { background: #E2E8F0; }

.tsp-gallery-add {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  border: 2px dashed #D1D5DB;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #94A3B8;
  font-size: 0.72rem;
  cursor: pointer;
  background: #FAFBFC;
  transition: border-color 0.15s;
}
.tsp-gallery-add:hover {
  border-color: #6C5CE7;
  color: #6C5CE7;
}

/* ── Application Form ── */
.tsp-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tsp-form__group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tsp-form__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
}

.tsp-form__required {
  color: #EF4444;
  margin-left: 2px;
}

.tsp-form__input,
.tsp-form__select,
.tsp-form__textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  font-size: 0.88rem;
  font-family: inherit;
  color: #1E293B;
  background: #F8FAFC;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.tsp-form__input:focus,
.tsp-form__select:focus,
.tsp-form__textarea:focus {
  border-color: #6C5CE7;
  box-shadow: 0 0 0 3px rgba(108,92,231,0.1);
  background: #fff;
}
.tsp-form__input::placeholder,
.tsp-form__textarea::placeholder {
  color: #94A3B8;
}

.tsp-form__textarea {
  resize: vertical;
  min-height: 80px;
}

.tsp-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.tsp-form__divider {
  font-size: 0.82rem;
  font-weight: 700;
  color: #6C5CE7;
  padding: 8px 0 2px;
  border-bottom: 1px solid #EDE9FE;
  margin-top: 4px;
}

.tsp-form__submit {
  padding: 14px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #6C5CE7, #5B4CCB);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 14px rgba(108,92,231,0.25);
  transition: transform 0.1s, box-shadow 0.15s;
  margin-top: 6px;
}
.tsp-form__submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(108,92,231,0.35);
}
.tsp-form__submit:active {
  transform: scale(0.98);
}

/* ── Footer ── */
.tsp-footer {
  text-align: center;
  padding: 32px 16px 24px;
  margin-top: 20px;
}

.tsp-footer__brand {
  font-size: 0.82rem;
  color: #94A3B8;
  margin-bottom: 12px;
  line-height: 1.5;
}

.tsp-footer__brand strong {
  color: #6C5CE7;
  font-weight: 700;
}

.tsp-footer__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 24px;
  background: #F3F0FF;
  color: #6C5CE7;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, transform 0.1s;
}
.tsp-footer__cta:hover {
  background: #EDE9FE;
  transform: translateY(-1px);
}

/* ── Lightbox (갤러리/커리큘럼 확대) ── */
.tsp-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: tspFadeIn 0.2s ease;
}

.tsp-lightbox__img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
}

.tsp-lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: none;
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tsp-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: none;
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tsp-lightbox__nav--prev { left: 12px; }
.tsp-lightbox__nav--next { right: 12px; }

/* ── Toast ── */
.tsp-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: #1E293B;
  color: #fff;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 600;
  z-index: 3000;
  animation: tspSlideUp 0.3s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

@keyframes tspFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes tspSlideUp {
  from { transform: translate(-50%, 20px); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}

/* ── 편집 모드 표시 ── */
.tsp--editing {
  border-top: 3px solid #6C5CE7;
}

.tsp-block--editing {
  border-color: #6C5CE7;
  box-shadow: 0 0 0 2px rgba(108,92,231,0.15);
}

/* ── 편집 아이콘 버튼 ── */
.tsp-edit-icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid #E5E7EB;
  background: #F8FAFC;
  color: #6C5CE7;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}
.tsp-edit-icon-btn:hover {
  background: #EDE9FE;
  border-color: #6C5CE7;
}

/* ── 블록 편집 패널 ── */
.tsp-block-edit {
  padding: 12px 18px 14px;
  background: #F8FAFC;
  border-top: 1px solid #E5E7EB;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: tspFadeIn 0.2s ease;
}

.tsp-block-edit__row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tsp-block-edit__row label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748B;
  min-width: 52px;
  flex-shrink: 0;
}
.tsp-block-edit__row input,
.tsp-block-edit__row select {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  font-size: 0.82rem;
  font-family: inherit;
  color: #1E293B;
  background: #fff;
  outline: none;
  box-sizing: border-box;
}
.tsp-block-edit__row input:focus,
.tsp-block-edit__row select:focus {
  border-color: #6C5CE7;
  box-shadow: 0 0 0 2px rgba(108,92,231,0.1);
}

.tsp-block-edit__actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.tsp-block-edit__done {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 8px;
  border: none;
  background: #6C5CE7;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.tsp-block-edit__icon-upload {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #D1D5DB;
  background: #fff;
  color: #6C5CE7;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.tsp-block-edit__icon-upload:hover { background: #F3F0FF; }

.tsp-block-edit__delete {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid #FCA5A5;
  background: #FEF2F2;
  color: #DC2626;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

/* ── 소개글 편집 텍스트에리어 ── */
.tsp-intro-edit {
  width: 100%;
  min-height: 200px;
  padding: 12px 14px;
  border: 1px solid #D1D5DB;
  border-radius: 10px;
  font-size: 0.88rem;
  font-family: inherit;
  color: #1E293B;
  line-height: 1.7;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
  background: #fff;
}
.tsp-intro-edit:focus {
  border-color: #6C5CE7;
  box-shadow: 0 0 0 3px rgba(108,92,231,0.1);
}

/* ── Hero 제목 편집 ── */
.tsp-hero__title-edit {
  width: 100%;
  background: transparent;
  border: 1px dashed rgba(255,255,255,0.5);
  border-radius: 8px;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.3;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
  resize: none;
  outline: none;
  font-family: inherit;
  padding: 4px 8px;
}
.tsp-hero__camera-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.8);
  font-size: 0.75rem;
  margin-top: 8px;
}

/* ── 링크 블록 추가 버튼 ── */
.tsp-add-block-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  margin-top: 14px;
  border: 2px dashed #D1D5DB;
  border-radius: 16px;
  background: #FAFBFC;
  color: #6C5CE7;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.tsp-add-block-btn:hover {
  border-color: #6C5CE7;
  background: #F3F0FF;
}

/* ── 편집 모드 상단 바 ── */
.tsp-edit-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #1E293B;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
}
.tsp-edit-topbar__label {
  font-size: 0.82rem;
  font-weight: 700;
  flex: 1;
}
.tsp-edit-topbar__btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.25);
  background: transparent;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.tsp-edit-topbar__btn:hover {
  background: rgba(255,255,255,0.1);
}
.tsp-edit-topbar__btn--publish {
  background: #6C5CE7;
  border-color: #6C5CE7;
}
.tsp-edit-topbar__btn--publish:hover {
  background: #5B4CCB;
}

/* ── 하단 네비게이션바 ── */
.tsp-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: #fff;
  border-top: 1px solid #E5E7EB;
  padding: 6px 0;
  padding-bottom: calc(6px + env(safe-area-inset-bottom));
  z-index: 200;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
}

.tsp-bottom-nav__btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  border: none;
  background: transparent;
  color: #64748B;
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s;
}
.tsp-bottom-nav__btn:hover {
  color: #6C5CE7;
}
.tsp-bottom-nav__btn--primary {
  color: #6C5CE7;
}
.tsp-bottom-nav__btn--publish {
  color: #fff;
  background: #6C5CE7;
  border-radius: 12px;
  margin: 0 4px;
  padding: 8px 16px;
}
.tsp-bottom-nav__btn--publish:hover {
  background: #5B4CCB;
}

/* ── 설정 모달 ── */
.tsp-settings-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: tspFadeIn 0.2s ease;
}

.tsp-settings-modal {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.tsp-settings-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #E5E7EB;
}
.tsp-settings-modal__header h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #1E293B;
  margin: 0;
}
.tsp-settings-modal__header button {
  background: none;
  border: none;
  color: #94A3B8;
  cursor: pointer;
  padding: 4px;
}

.tsp-settings-modal__body {
  padding: 20px;
}

.tsp-settings-modal__section h4 {
  font-size: 0.88rem;
  font-weight: 700;
  color: #1E293B;
  margin: 0 0 6px;
}

.tsp-settings-modal__desc {
  font-size: 0.78rem;
  color: #64748B;
  line-height: 1.6;
  margin: 0 0 12px;
}

.tsp-settings-modal__guide {
  margin-top: 16px;
  padding: 14px;
  background: #F8FAFC;
  border-radius: 10px;
  border: 1px solid #E5E7EB;
  font-size: 0.78rem;
  color: #334155;
  line-height: 1.6;
}
.tsp-settings-modal__guide strong {
  display: block;
  margin-bottom: 6px;
  color: #1E293B;
}
.tsp-settings-modal__guide ol {
  margin: 6px 0;
  padding-left: 18px;
}
.tsp-settings-modal__guide li {
  margin: 3px 0;
}

.tsp-settings-modal__code {
  display: block;
  background: #1E293B;
  color: #E2E8F0;
  padding: 12px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-family: 'Courier New', monospace;
  overflow-x: auto;
  white-space: pre;
  margin: 8px 0;
  line-height: 1.5;
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .tsp-hero { height: 220px; }
  .tsp-hero__title { font-size: 1.3rem; }
  .tsp-hero__title-edit { font-size: 1.3rem; }
  .tsp-form__row { grid-template-columns: 1fr; }
}
/* ============================================
   Front Page - Public Link Collection Page
   ============================================ */

/* Root Container */
.front-page {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans KR', 'Segoe UI', 'Roboto', sans-serif;
  color: #fff;
  overflow-x: hidden;
}

/* Ad Banner */
.ad-banner {
  width: 100%;
  padding: 1rem;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.ad-banner__content {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.ad-banner__close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s ease;
  flex-shrink: 0;
}

.ad-banner__close:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Main Container */
.front-page__container {
  flex: 1;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
}

/* Profile Section */
.profile-section {
  text-align: center;
  margin-bottom: 2rem;
  animation: fadeInUp 0.6s ease-out;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 이미지가 있을 때 — 인라인 style로 크기/모양 제어 */
.avatar--has-image {
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.avatar--has-image img {
  display: block;
}

.avatar__initial {
  font-size: 2.5rem;
  font-weight: 700;
}

.profile-name {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 1rem 0 0.5rem 0;
  letter-spacing: -0.5px;
}

.profile-username {
  font-size: 0.95rem;
  font-weight: 500;
  margin: 0 0 1rem 0;
}

.profile-bio {
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 1.5rem 0;
  padding: 0 1rem;
}

/* Social Links Row */
.social-links {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.social-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  text-decoration: none;
}

.social-icon:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.social-icon svg {
  width: 20px;
  height: 20px;
}

/* Links Section */
.links-section {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-bottom: 2rem;
}

/* Link Card */
.link-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid;
  border-radius: 12px;
  background-color: #1a1a2e;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  font-family: inherit;
  font-size: 1rem;
  text-align: left;
  width: 100%;

  /* Type borders - default on left */
  border-left-width: 4px;
  border-left-color: transparent;

  animation: fadeInUp 0.5s ease-out forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.link-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.link-card--active {
  transform: scale(0.96);
}

/* Link Card - Product (Pink left border) */
.link-card--product {
  border-left-color: #ff6b6b;
}

.link-card--product:hover {
  box-shadow: 0 8px 20px rgba(255, 107, 107, 0.2);
}

/* Link Card - Donation (Yellow left border) */
.link-card--donation {
  border-left-color: #ffd93d;
}

.link-card--donation:hover {
  box-shadow: 0 8px 20px rgba(255, 217, 61, 0.2);
}

/* Link Card - Affiliate (Teal left border) */
.link-card--affiliate {
  border-left-color: #00d4ff;
}

.link-card--affiliate:hover {
  box-shadow: 0 8px 20px rgba(0, 212, 255, 0.2);
}

.link-card__icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.link-card__icon-img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
}

.link-card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.link-card__title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
  word-break: break-word;
}

.link-card__price {
  font-size: 0.8rem;
  opacity: 0.7;
  margin: 0;
  font-weight: 500;
}

.link-card__arrow {
  font-size: 1.25rem;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.link-card:hover .link-card__arrow {
  transform: translateX(4px);
}

/* ============================================
   Notification Card Style (알림 카드)
   ============================================ */

/* 3탭 네비게이션 */
.front-tab-bar { display: flex; justify-content: center; gap: 0; margin-top: 4px; margin-bottom: 1.2rem; padding: 3px; background: #F3F4F6; border-radius: 12px; }
.front-tab-btn { flex: 1; padding: 9px 12px; border: none; border-radius: 10px; font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 4px; }
.front-tab-btn--active { box-shadow: 0 1px 4px rgba(108,92,231,0.3); }

/* Store 상품 그리드 (3열) */
.store-product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.store-product-card { background: #fff; border-radius: 10px; border: 1px solid rgba(0,0,0,0.08); overflow: hidden; transition: transform 0.15s ease; }
.store-product-card:active { transform: scale(0.97); }
.store-product-card__img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.store-product-card__placeholder { width: 100%; aspect-ratio: 1; background: #F3F4F6; display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.store-product-card__info { padding: 6px 8px; }
.store-product-card__title { font-size: 0.65rem; font-weight: 600; color: #1A1A2E; margin: 0 0 2px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.store-product-card__price { font-size: 0.7rem; font-weight: 800; color: #1A1A2E; margin: 0; }

@media (max-width: 360px) {
  .store-product-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Solve 카테고리 그리드 (2열) */
.solve-category-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.solve-category-card { background: #fff; border: 1.5px solid #E5E7EB; border-radius: 12px; padding: 14px 12px; text-align: center; transition: transform 0.15s ease; }
.solve-category-card:active { transform: scale(0.97); }

.noti-card {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: none;
  border: 1.5px solid rgba(0, 0, 0, 0.15);
  animation: fadeInUp 0.4s ease-out forwards;
}

.noti-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.noti-card--active {
  transform: scale(0.97);
}

.noti-card--expanded {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

.noti-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
}

.noti-card__icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(108, 92, 231, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
  overflow: hidden;
  filter: contrast(1.1) saturate(1.2);
}

.noti-card__icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}

.noti-card__info {
  flex: 1;
  min-width: 0;
}

.noti-card__title {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.4;
  word-break: break-word;
  white-space: pre-wrap;
  text-align: center;
  width: 100%;
}

/* 접힌 상태: 2줄 제한 + 줄바꿈(\n) 유지 */
.noti-card__title--clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
}

/* 펼친 상태: 전체 제목 */
.noti-card__title-full {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 10px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.noti-card__url {
  font-size: 0.72rem;
  opacity: 0.5;
  margin: 2px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.noti-card__badge {
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.noti-card__toggle, .noti-card__more {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.15s ease;
}
.noti-card__more { font-size: 1.2rem; }

.noti-card__toggle:hover, .noti-card__more:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* 펼침 영역 */
.noti-card__body {
  padding: 0 16px 16px;
  animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
  from { opacity: 0; max-height: 0; }
  to { opacity: 1; max-height: 500px; }
}

.noti-card__desc {
  font-size: 0.85rem;
  line-height: 1.6;
  margin: 0 0 12px;
  white-space: pre-wrap;
  opacity: 0.85;
}

.noti-card__link {
  display: block;
  font-size: 0.8rem;
  word-break: break-all;
  margin-bottom: 12px;
  text-decoration: underline;
}

.noti-card__open-btn {
  display: block;
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  color: #FFFFFF;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.noti-card__open-btn:hover {
  opacity: 0.85;
}

/* 모바일 — 카드 + 명함 최적화 */
@media (max-width: 480px) {
  .noti-card__header { padding: 12px 14px; gap: 10px; }
  .noti-card__icon { width: 38px; height: 38px; border-radius: 10px; font-size: 1.1rem; }
  .noti-card__title { font-size: 0.82rem; }
  .noti-card__toggle { width: 28px; height: 28px; font-size: 0.85rem; }

  /* 명함 모바일 로고 */
  .front-namecard__logo-img { width: 72px; height: 72px; }
  .front-namecard__logo-side { width: 68px; height: 68px; }
}

/* 하단 4버튼 바 */
.front-bottom-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 1.5rem 0; }
.front-bottom-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 4px; background: rgba(255,255,255,0.8); backdrop-filter: blur(8px); border: 1px solid rgba(0,0,0,0.06); border-radius: 14px; cursor: pointer; transition: all 0.15s ease; }
.front-bottom-btn span { font-size: 1.2rem; }
.front-bottom-btn small { font-size: 0.7rem; font-weight: 600; color: #555; }
.front-bottom-btn:hover { background: rgba(108,92,231,0.08); border-color: rgba(108,92,231,0.2); }

/* SNS 공유 패널 (FrontPage) */
.front-share-panel { margin-bottom: 1rem; padding: 16px; background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); border-radius: 16px; border: 1px solid rgba(0,0,0,0.06); }
.front-share-icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.front-share-icon { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 12px; text-decoration: none; cursor: pointer; transition: all 0.15s ease; }
.front-share-icon:hover { transform: scale(1.05); }
.front-share-icon span { font-size: 1.2rem; }
.front-share-icon small { font-size: 0.6rem; font-weight: 600; color: #333; }

/* 명함 모달 */
.namecard-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.namecard-modal { background: #fff; border-radius: 20px; width: 100%; max-width: 380px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.2); animation: fadeInUp 0.3s ease; }
.namecard-tabs { display: flex; border-bottom: 1px solid #E5E7EB; position: relative; }
.namecard-tab { flex: 1; padding: 14px; background: none; border: none; font-size: 0.85rem; font-weight: 600; color: #999; cursor: pointer; }
.namecard-tab.active { color: #6C5CE7; border-bottom: 2px solid #6C5CE7; }
.namecard-close { position: absolute; right: 12px; top: 12px; background: none; border: none; font-size: 1.1rem; color: #999; cursor: pointer; }

/* 명함 페이퍼 */
.namecard-paper { padding: 32px 24px; text-align: center; background: linear-gradient(135deg, #FAFAFA, #FFFFFF); min-height: 200px; }
.namecard-paper--profile { text-align: left; }
.namecard-paper__logo { width: 60px; height: 60px; object-fit: contain; border-radius: 12px; margin-bottom: 12px; }
.namecard-paper__avatar { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; margin-bottom: 12px; display: block; }
.namecard-paper__name { font-size: 1.3rem; font-weight: 800; color: #1A1A2E; margin: 0 0 6px; }
.namecard-paper__bio { font-size: 0.85rem; color: #888; margin: 0 0 12px; line-height: 1.5; white-space: pre-wrap; }
.namecard-paper__divider { width: 40px; height: 2px; background: #6C5CE7; margin: 12px auto; }
.namecard-paper--profile .namecard-paper__divider { margin: 12px 0; }
.namecard-paper__url { font-size: 0.8rem; color: #6C5CE7; font-weight: 600; margin: 8px 0 0; }
.namecard-paper__info { font-size: 0.8rem; color: #555; margin: 4px 0; white-space: pre-wrap; }
.namecard-paper__link { font-size: 0.8rem; color: #333; padding: 6px 0; border-bottom: 1px solid #F3F4F6; }

/* 종이명함 비즈니스 카드 스타일 */
.namecard-biz { padding: 28px 24px; background: linear-gradient(135deg, #FEFEFE, #F8F9FA); min-height: 200px; position: relative; }
.namecard-biz::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #6C5CE7, #00CEC9); }
.namecard-biz__logo-center { text-align: center; margin-bottom: 16px; }
.namecard-biz__logo-img { width: 56px; height: 56px; object-fit: contain; border-radius: 10px; }
.namecard-biz__logo-side { width: 52px; height: 52px; object-fit: contain; border-radius: 10px; flex-shrink: 0; }
.namecard-biz__body { display: flex; align-items: flex-start; gap: 16px; }
.namecard-biz__info { flex: 1; }
.namecard-biz__company { font-size: 0.8rem; font-weight: 700; color: #6C5CE7; margin: 0 0 4px; letter-spacing: 1px; text-transform: uppercase; }
.namecard-biz__name { font-size: 1.25rem; font-weight: 800; color: #1A1A2E; margin: 0 0 2px; }
.namecard-biz__divider { width: 32px; height: 2px; background: #6C5CE7; margin: 10px 0; }
.namecard-biz__info[style*="center"] .namecard-biz__divider { margin: 10px auto; }
.namecard-biz__info[style*="right"] .namecard-biz__divider { margin-left: auto; }
.namecard-biz__details { display: flex; flex-direction: column; gap: 4px; }
.namecard-biz__details p { font-size: 0.78rem; color: #555; margin: 0; line-height: 1.6; }

/* 사용자 페이지 종이명함 (펼치기 모드) */
/* 종이명함 디자인 — 컴팩트 */
.front-namecard { background: #FFFFFF; border-radius: 12px; box-shadow: 0 1px 6px rgba(0,0,0,0.08); overflow: visible; animation: slideUp 0.4s ease both; margin-bottom: 0; }
.front-namecard__accent { height: 2px; background: linear-gradient(90deg, #6C5CE7, #00CEC9); }
.front-namecard__logo-center { text-align: center; padding: 14px 16px 0; }
.front-namecard__logo-img { width: 88px; height: 88px; object-fit: contain; border-radius: 12px; }
.front-namecard__logo-side { width: 80px; height: 80px; object-fit: contain; border-radius: 12px; flex-shrink: 0; }
.front-namecard--vertical { max-width: 200px; margin: 0 auto; }
.front-namecard--vertical .front-namecard__logo-img { margin-bottom: 6px; }
.front-namecard__body { display: flex; align-items: flex-start; gap: 10px; padding: 10px 16px 12px; overflow: hidden; }
.front-namecard__info { flex: 1; min-width: 0; overflow: hidden; }
.front-namecard__company { font-size: 0.8rem; font-weight: 700; color: #6C5CE7; margin: 0 0 1px; letter-spacing: 0.5px; text-transform: uppercase; }
.front-namecard__name { font-size: 0.85rem; font-weight: 800; color: #1A1A2E; margin: 0; }
.front-namecard__divider { width: 20px; height: 1.5px; background: #6C5CE7; margin: 5px 0; }
.front-namecard__info[style*="center"] .front-namecard__divider { margin: 5px auto; }
.front-namecard__info[style*="right"] .front-namecard__divider { margin-left: auto; }
.front-namecard__details { display: flex; flex-direction: column; gap: 1px; }
.front-namecard__details p { font-size: 0.62rem; color: #555; margin: 0; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.front-namecard__address { white-space: normal !important; overflow: visible !important; line-height: 1.4 !important; }
.front-namecard__details p span { display: inline-block; width: 14px; font-size: 0.55rem; }
.front-namecard__details a { color: #555; }
.front-namecard__share { display: flex; gap: 6px; padding: 8px 16px 10px; animation: fadeInUp 0.2s ease; }

/* 명함 전체화면 */
.namecard-fullscreen { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; animation: fadeIn 0.2s ease; }
.namecard-fullscreen__card { background: #fff; border-radius: 16px; width: 100%; max-width: 400px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); overflow: hidden; animation: fadeInUp 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* 접기 모드 명함 상세 */
.noti-card__namecard-details { display: flex; flex-direction: column; gap: 3px; margin: 6px 0; }
.noti-card__namecard-details p { font-size: 0.8rem; color: #666; margin: 0; }

.namecard-actions { display: flex; gap: 8px; padding: 16px; border-top: 1px solid #F3F4F6; }
.namecard-action-btn { flex: 1; padding: 12px; border-radius: 10px; font-size: 0.85rem; font-weight: 700; cursor: pointer; border: 1px solid #E5E7EB; background: #F9FAFB; color: #555; transition: all 0.15s ease; }
.namecard-action-btn:first-child { background: #6C5CE7; color: #fff; border-color: #6C5CE7; }
.namecard-action-btn:hover { opacity: 0.85; }

/* Free Plan Ads */
.free-ads { display: flex; flex-direction: column; gap: 8px; margin: 1.5rem 0; }
.free-ad {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 10px;
  cursor: pointer; transition: all 0.2s ease;
}
.free-ad:hover { background: #F3F0FF; border-color: #D6D0F7; }
.free-ad__badge {
  padding: 2px 6px; background: #FDCB6E; color: #856404; border-radius: 4px;
  font-size: 0.6rem; font-weight: 800; flex-shrink: 0;
}
.free-ad__text { font-size: 0.8rem; color: #888; }

/* 나도 만들기 배너 */
.front-make-banner {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: #F0F4F8; border: 1px solid #D1D9E6; border-radius: 14px;
  margin: 1.5rem 0;
  flex-wrap: wrap;
}
.front-make-banner__label {
  font-size: 0.92rem; color: #333; font-weight: 600;
  white-space: nowrap;
}
.front-make-banner__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.front-make-banner__btn {
  padding: 10px 20px;
  background: #1B3A5C; color: #fff;
  border: 2px solid #16324A; border-radius: 10px;
  font-size: 0.88rem; font-weight: 700;
  cursor: pointer; transition: all 0.2s ease;
  white-space: nowrap;
}
.front-make-banner__btn:hover {
  background: #274D73; border-color: #1B3A5C;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(27, 58, 92, 0.25);
}
@media (max-width: 480px) {
  .front-make-banner { flex-direction: column; align-items: flex-start; gap: 10px; }
  .front-make-banner__btns { width: 100%; }
  .front-make-banner__btn { flex: 1; text-align: center; padding: 10px 12px; font-size: 0.82rem; }
}

/* 앱 설치 토스트 */
.front-install-toast {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  text-align: center;
  padding: 14px 20px;
  background: linear-gradient(135deg, #6C5CE7, #8B5CF6);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(108, 92, 231, 0.4);
  animation: front-toast-slide 0.35s ease-out;
}
@keyframes front-toast-slide {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Watermark */
.watermark {
  text-align: center;
  padding: 1.5rem 1rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.watermark:hover {
  color: rgba(255, 255, 255, 0.7);
}

/* ============================================
   Mobile Responsive Design
   ============================================ */

@media (max-width: 480px) {
  .front-page__container {
    padding: 1.5rem 1rem;
  }

  .profile-section {
    margin-bottom: 1.5rem;
  }

  .avatar {
    width: 90px;
    height: 90px;
    font-size: 2.25rem;
  }

  .avatar--has-image {
    /* 인라인 style로 제어 */
  }

  .profile-name {
    font-size: 1.5rem;
  }

  .profile-username {
    font-size: 0.9rem;
  }

  .profile-bio {
    font-size: 0.75rem;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .social-links {
    gap: 0.5rem;
  }

  .social-icon {
    width: 40px;
    height: 40px;
  }

  .social-icon svg {
    width: 18px;
    height: 18px;
  }

  .links-section {
    gap: 0.75rem;
    margin-bottom: 1.5rem;
  }

  .link-card {
    padding: 0.625rem 0.75rem;
    border-radius: 10px;
    gap: 0.5rem;
  }

  .link-card__icon {
    font-size: 1rem;
    width: 28px;
    height: 28px;
  }

  .link-card__icon-img {
    width: 28px;
    height: 28px;
  }

  .link-card__title {
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ad-banner__content {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .ad-banner__close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
  }
}

/* ============================================
   Animation & Transition Utilities
   ============================================ */

/* Smooth transitions */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Disable transitions for performance on large screens */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   Theme Defaults (overridden by inline styles)
   ============================================ */

.front-page {
  background-color: #F8F9FA;
  color: #2D3436;
}

.link-card {
  background-color: #FFFFFF;
  border-color: #E5E7EB;
  color: #2D3436;
}

.profile-name,
.link-card__title {
  color: #2D3436;
}

.profile-username {
  color: rgba(45, 52, 54, 0.6);
}

.profile-bio {
  color: rgba(45, 52, 54, 0.87);
}

/* ============================================
   Bible Activity Block
   ============================================ */
.bible-streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 14px;
  background: linear-gradient(135deg, #1e40af, #3b82f6);
  color: #fff;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  margin-top: 8px;
  animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(30,64,175,0.3); }
  50% { box-shadow: 0 0 0 6px rgba(30,64,175,0); }
}

.bible-activity-section {
  padding: 0 0 16px;
}

.bible-activity-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.95);
  border-radius: 14px;
  margin-bottom: 8px;
  border: 1px solid rgba(30,64,175,0.1);
}

.bible-activity-card__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EFF6FF;
  border-radius: 10px;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.bible-activity-card__content {
  flex: 1;
  min-width: 0;
}

.bible-activity-card__title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1A1A2E;
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bible-activity-card__time {
  font-size: 0.72rem;
  color: #999;
}

/* ===== 소셜 인터랙션 바 ===== */
.social-interaction-bar {
  animation: fadeIn 0.4s ease;
}

.social-btn {
  transition: all 0.2s ease;
}
.social-btn:hover {
  transform: scale(1.05);
}
.social-btn:active {
  transform: scale(0.95);
}
.social-btn--active {
  animation: heartBeat 0.3s ease;
}

@keyframes heartBeat {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== App Card (APPs 탭) ===== */
.app-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* ===== Solve Category Card 개선 ===== */
.solve-category-card {
  cursor: pointer;
  transition: all 0.2s ease;
}
.solve-category-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* ===== 명함 액션 버튼 (저장/공유/전화/이메일/지도 아이콘) ===== */
.front-namecard__share {
  display: flex;
  gap: 10px;
  padding: 12px 14px 6px;
  justify-content: center;
  flex-wrap: wrap;
}
.front-namecard__action-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #E5E7EB;
  background: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.front-namecard__action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(108, 92, 231, 0.18);
  background: #F3F0FF;
}
.front-namecard__action-btn:active { transform: translateY(0); }

/* ===== 페이지 복제 버튼 (FrontPage 하단) ===== */
.front-clone-wrap {
  margin: 28px 16px 40px;
  padding-top: 24px;
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
  text-align: center;
}
.front-clone-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(108, 92, 231, 0.28);
  transition: transform 0.15s, box-shadow 0.2s, filter 0.2s;
}
.front-clone-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(108, 92, 231, 0.35);
  filter: brightness(1.05);
}
.front-clone-btn:active { transform: translateY(0); }
.front-clone-hint {
  margin: 10px 0 0;
  font-size: 0.75rem;
  color: #999;
  line-height: 1.5;
}

/* ============================================================
   Inline Edit FAB (Process Guide §2.2 — owner-only "편집하기")
   ============================================================ */
.front-edit-fab {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 950;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  border: none;
  border-radius: 22px;
  background: #3B82F6;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.front-edit-fab:hover { background: #2563EB; transform: translateY(-1px); }
.front-edit-fab:active { transform: translateY(0); }

@media (max-width: 480px) {
  .front-edit-fab {
    top: 8px;
    right: 8px;
    padding: 0 12px;
    font-size: 0.82rem;
  }
  .front-edit-fab span { display: none; }
}

/* ============================================
   인라인 편집 모드 (FrontPage Inline Edit)
   ============================================ */

/* 편집 모드 진입 버튼 — canEdit && !isEdit 일 때만 표시 */
.fp-edit-enter-btn {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 999;
  height: 36px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.88);
  color: #F8FAFC;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 18px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, background 0.2s ease;
}

.fp-edit-enter-btn:hover {
  background: rgba(15, 23, 42, 0.96);
  transform: translateY(-1px);
}

.fp-edit-enter-btn:active { transform: translateY(0); }

@media (max-width: 480px) {
  .fp-edit-enter-btn {
    top: 8px;
    right: 8px;
    height: 32px;
    padding: 0 11px;
    font-size: 0.78rem;
  }
}

/* 편집 모드 body 클래스 — 비편집 UI 숨김 */
body.inline-edit-active .social-interaction-bar,
body.inline-edit-active .front-bottom-bar,
body.inline-edit-active .front-make-banner,
body.inline-edit-active .front-clone-wrap,
body.inline-edit-active .watermark,
body.inline-edit-active .ad-banner {
  display: none !important;
}

/* 편집 모드 진입 시 상단 악센트 + fade-in */
.front-page--edit {
  border-top: 3px solid #6C5CE7;
  animation: fpInlineEditFadeIn 0.3s ease;
}

@keyframes fpInlineEditFadeIn {
  from { opacity: 0.75; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 편집 input 공통 (이름/바이오) */
.fp-edit-input {
  width: calc(100% - 32px);
  max-width: 340px;
  padding: 10px 14px;
  background: rgba(108, 92, 231, 0.06);
  border: 1px dashed #6C5CE7;
  border-radius: 12px;
  font-family: inherit;
  outline: none;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.fp-edit-input:focus {
  border-style: solid;
  background: #ffffff;
  color: #1A1A2E !important;
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.18);
}

.fp-edit-input--name {
  font-size: 1.4rem;
  font-weight: 800;
  text-align: center;
  margin: 14px auto 8px;
  display: block;
}

.fp-edit-input--bio {
  font-size: 0.95rem;
  resize: vertical;
  min-height: 72px;
  margin: 0 auto 18px;
  display: block;
  line-height: 1.45;
}

/* 아바타 카메라 오버레이 */
.fp-avatar-wrap {
  position: relative;
  display: inline-block;
}

.fp-avatar-edit-overlay {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #6C5CE7;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(108, 92, 231, 0.45);
  border: 2px solid #ffffff;
  transition: transform 0.15s ease;
}

.fp-avatar-edit-overlay:hover {
  transform: scale(1.06);
}

/* 링크 편집 폼 (BlockWrapper 내부, focused 시) */
.fp-link-edit-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: rgba(108, 92, 231, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(108, 92, 231, 0.25);
}

.fp-link-edit-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  color: #555;
}

.fp-link-edit-form__label {
  font-weight: 600;
  color: #555;
  letter-spacing: 0.02em;
}

.fp-link-edit-form input[type="text"],
.fp-link-edit-form input[type="url"] {
  padding: 9px 12px;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.95rem;
  background: #ffffff;
  color: #1A1A2E;
  outline: none;
  transition: all 0.15s ease;
}

.fp-link-edit-form input[type="text"]:focus,
.fp-link-edit-form input[type="url"]:focus {
  border-color: #6C5CE7;
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.15);
}

.fp-link-edit-form__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
}

.fp-link-edit-form__toggle {
  display: inline-flex;
  flex-direction: row !important;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: #555;
  cursor: pointer;
}

.fp-link-edit-form__toggle input {
  width: 16px;
  height: 16px;
  accent-color: #6C5CE7;
  margin: 0;
}

.fp-link-edit-form__done {
  padding: 7px 14px;
  background: #6C5CE7;
  color: #ffffff;
  border: none;
  border-radius: 9px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.fp-link-edit-form__done:hover { background: #5A4CD9; }

/* 링크 추가 버튼 */
.fp-add-link-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 18px auto 0;
  padding: 11px 22px;
  background: #6C5CE7;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 12px rgba(108, 92, 231, 0.25);
}

.fp-add-link-btn:hover {
  background: #5A4CD9;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(108, 92, 231, 0.35);
}

.fp-add-link-btn:active { transform: translateY(0); }

/* ============================================
   Level 1 블록 편집 (BlockEditOverlay 통합)
   ============================================ */

/* BlockWrapper 내부에 BlockEditOverlay 가 있으면
   기존 BlockCtrls(Settings/Grip/Trash) 와 VisBadge 를 숨긴다 — 중복 방지 */
.fp-block-edit-wrap .ie-block-ctrls,
.fp-block-edit-wrap .ie-block__tools {
  display: none !important;
}

.fp-block-edit-wrap .ie-block--edit {
  padding: 0.25rem;
  border: none;
}

.fp-block-edit-wrap .ie-block--edit:hover,
.fp-block-edit-wrap .ie-block--edit.is-focused {
  background: transparent;
  border-color: transparent;
}

/* BlockEditOverlay 내부 콘텐츠가 편집 모드에서 오버레이 아이콘과 겹치지 않도록
   좌측 ↑↓ 화살표 공간 확보 (PC) */
@media (min-width: 481px) {
  .fp-block-edit-wrap { padding-left: 40px; }
}

/* 블록 접기 (useBlockEditor.collapsed) — 높이 48px */
.fp-block-edit-wrap .block-collapsed,
.block-collapsed {
  height: 48px;
  overflow: hidden;
}

/* 블록 편집/삭제 아이콘 — 공통 터치 타겟 확보 */
.block-edit-icon,
.block-delete-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
}

.block-arrows {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}

/* ============================================
   Wobble 모드 — iOS 홈화면 스타일 편집 (Level 2)
   ============================================ */

/* long-press 진입 감지용 블록 래퍼 — 레이아웃 영향 없음 */
.fp-block-longpress {
  display: block;
  position: relative;
}

/* wobble 모드 활성 시 기존 Level 1 편집 UI (연필/화살표/삭제 아이콘) 숨김 */
body.wobble-mode-active .ie-block-ctrls,
body.wobble-mode-active .ie-vis-badge,
body.wobble-mode-active .fp-edit-enter-btn,
body.wobble-mode-active .fp-add-link-btn,
body.wobble-mode-active .front-bottom-bar,
body.wobble-mode-active .front-clone-wrap,
body.wobble-mode-active .front-share-panel,
body.wobble-mode-active .ie-toolbar {
  display: none !important;
}

/* wobble 중 focus 편집 폼(Level 1) 진입 비활성 — 본문 탭 이벤트 차단 */
body.wobble-mode-active .fp-link-edit-form {
  display: none !important;
}

/* wobble 모드: 기본 wobble-block 외부 컨테이너 — 원래 레이아웃 유지 */
body.wobble-mode-active .fp-block-longpress {
  /* 카드들 간격 유지 */
  margin-bottom: 8px;
}

/* wobble 드래그 중 반투명 고스트 블록 — 원본 위치 기준 */
.wobble-drag-ghost {
  pointer-events: none;
}

/* ============================================
   NEW LAYOUT — Profile BG + Folder Grid + APPs + IncomeLink
   ============================================ */

/* Profile Background Area */
.fp-profile-bg {
  position: relative;
  width: 100%;
  height: 220px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  overflow: hidden;
  border-radius: 0 0 16px 16px;
}

.fp-profile-bg__edit-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0,0,0,0.4);
  border: none;
  border-radius: 20px;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  z-index: 5;
  -webkit-tap-highlight-color: transparent;
}

.fp-profile-bg__avatar-wrap {
  position: absolute;
  left: 32px;
  top: 50%;
  transform: translateY(-50%);
}

.fp-profile-bg__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid #fff;
  object-fit: cover;
  background: linear-gradient(135deg, #f093fb, #f5576c);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.fp-profile-bg__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fp-profile-bg__camera {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24px;
  height: 24px;
  background: #3B82F6;
  border-radius: 50%;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.fp-profile-bg__verse {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.95);
  font-size: 15px;
  line-height: 1.7;
  max-width: 55%;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
/* 배경 텍스트 위치: 기본 오른쪽, data-verse-align으로 동적 */
.fp-profile-bg__verse[data-verse-align="left"] { left: 16px; right: auto; text-align: left; }
.fp-profile-bg__verse[data-verse-align="center"] { left: 50%; right: auto; transform: translate(-50%, -50%); text-align: center; max-width: 80%; }
.fp-profile-bg__verse[data-verse-align="right"] { right: 16px; left: auto; text-align: right; }

.fp-profile-bg__verse-ref {
  font-size: 12px;
  opacity: 0.7;
  margin-top: 6px;
}

.fp-profile-bg__verse-edit {
  position: absolute;
  bottom: -8px;
  right: -8px;
  width: 28px;
  height: 28px;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}
.fp-profile-bg__verse-edit:hover { background: rgba(0,0,0,0.6); }

/* Profile Section (아바타 + 이름 + 상태 메시지, 세로 가운데 정렬) */
.fp-profile-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 16px 8px;
  margin-top: -44px;
  position: relative;
  z-index: 2;
}

/* 배경 숨김 시: margin-top 리셋 (배경 없이 단순 중앙) */
.fp-profile-section--no-bg {
  margin-top: 16px;
  align-items: center !important;
}

/* 배경 위 좌/우 배치 시: 아바타를 배경 하단에 겹쳐 배치 */
.fp-profile-section--positioned {
  margin-top: -44px;
}
.fp-profile-section--positioned[data-layout="left"] {
  align-items: flex-start;
}
.fp-profile-section--positioned[data-layout="right"] {
  align-items: flex-end;
}

.fp-profile-section__avatar {
  position: relative;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  background: #E2E8F0;
}
.fp-profile-section__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fp-profile-section__initial {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: #64748B;
  background: #E2E8F0;
}

.fp-profile-section__camera {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 26px;
  height: 26px;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid #fff;
  transition: background 0.15s ease;
}
.fp-profile-section__camera:hover { background: rgba(0,0,0,0.65); }

.fp-profile-section__name {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #1E293B;
  line-height: 1.3;
  text-align: center;
}

.fp-profile-section__bio {
  margin: 0;
  font-size: 12px;
  color: #94A3B8;
  line-height: 1.3;
  text-align: center;
}

/* Name & Bio below background (hidden by default, kept for compatibility) */
.fp-name-bio {
  padding: 12px 16px 8px;
}

.fp-name-bio__name {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

.fp-name-bio__bio {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.4;
  opacity: 0.7;
}

/* Social Bar (new layout version) */
.fp-social-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 16px 12px;
  border-bottom: 0.5px solid rgba(0,0,0,0.08);
}

.fp-social-bar__btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.fp-social-bar__btn--end {
  margin-left: auto;
}

/* Folder Grid: Namecard 50% + Links 25% + SNS 25% */
.fp-folder-grid {
  display: flex;
  padding: 12px 16px;
  gap: 8px;
}

/* Namecard column 50% */
.fp-namecard-col {
  width: 50%;
  background: #F5F6F8;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.fp-namecard-col__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  overflow: hidden;
}

.fp-namecard-col__name {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}

.fp-namecard-col__title {
  margin: 2px 0 0;
  font-size: 10px;
  opacity: 0.6;
}

.fp-namecard-col__info {
  font-size: 10px;
  opacity: 0.6;
  text-align: center;
  line-height: 1.3;
}

.fp-namecard-col__actions {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}

.fp-namecard-col__action-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 0.5px solid rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Links column 25% */
.fp-links-col,
.fp-sns-col {
  width: 25%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fp-folder-item {
  flex: 1;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px;
  gap: 3px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease;
  min-height: 52px;
}

.fp-folder-item:active {
  transform: scale(0.95);
}

.fp-folder-item__label {
  font-size: 10px;
  font-weight: 500;
  max-width: 4.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* APPs Section Box */
.fp-apps-box {
  margin: 4px 16px 8px;
  background: #F5F6F8;
  border-radius: 12px;
  padding: 12px;
}

.fp-apps-box__title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 500;
  opacity: 0.6;
}

.fp-apps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.fp-app-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.fp-app-item:active {
  opacity: 0.7;
}

.fp-app-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fp-app-label {
  font-size: 10px;
  opacity: 0.6;
  max-width: 4.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Link Cards (between Apps and IncomeLink) */
.fp-link-cards {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.fp-link-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #F5F6F8;
  border-radius: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
}

.fp-link-card:active {
  background: #ECEDF0;
}

.fp-link-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fp-link-card__info {
  flex: 1;
  min-width: 0;
}

.fp-link-card__title {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
}

.fp-link-card__url {
  margin: 0;
  font-size: 11px;
  opacity: 0.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* IncomeLink Section Box */
.fp-income-box {
  margin: 0 16px 8px;
  background: #F5F6F8;
  border-radius: 12px;
  padding: 12px;
}

.fp-income-box__title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 500;
  opacity: 0.6;
}

.fp-income-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.fp-income-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.fp-income-item:active {
  opacity: 0.7;
}

.fp-income-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fp-income-label {
  font-size: 8px;
  opacity: 0.6;
  text-align: center;
}

/* CTA Banner */
.fp-cta-banner {
  margin: 0 16px 12px;
  padding: 12px;
  background: linear-gradient(135deg, #1E293B, #334155);
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s ease;
}

.fp-cta-banner:active {
  opacity: 0.85;
}

.fp-cta-banner__text {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
}

/* Bottom Navigation */
.fp-bottom-nav {
  display: flex;
  border-top: 0.5px solid rgba(0,0,0,0.08);
  background: #fff;
  position: sticky;
  bottom: 0;
  z-index: 50;
}

.fp-bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  gap: 2px;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.fp-bottom-nav__item--active {
  color: #6C5CE7;
}

.fp-bottom-nav__label {
  font-size: 10px;
}

/* ===== Panel Overlay System ===== */
.panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1039;
  animation: panelFadeIn 0.2s ease-out;
}

.panel-overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 56px; /* above BottomNavBar */
  max-height: 60vh;
  overflow-y: auto;
  z-index: 1040;
  background: #fff;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
  animation: panelSlideUp 0.25s ease-out;
  -webkit-overflow-scrolling: touch;
}

@keyframes panelSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes panelFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* ============================================
   Onboarding Page - Mobile-First MVP Flow
   ============================================ */

.onboarding {
  min-height: 100vh;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1rem;
  font-family: 'Noto Sans KR', 'Inter', -apple-system, sans-serif;
  color: #1A1A2E;
}

/* ---- Progress Bar ---- */
.onboarding__progress {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 0.5rem;
}

.progress-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #E9ECF0;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.progress-dot.active {
  background: linear-gradient(135deg, #6C5CE7, #A29BFE);
  color: #fff;
  box-shadow: 0 0 16px rgba(108, 92, 231, 0.5);
}

.progress-dot.done {
  background: #00B894;
  color: #fff;
}

.progress-line {
  width: 40px;
  height: 2px;
  background: #E9ECF0;
  flex-shrink: 0;
}

.onboarding__step-labels {
  display: flex;
  gap: 36px;
  margin-bottom: 2rem;
  font-size: 0.75rem;
  color: #999;
}

.onboarding__step-labels span.active {
  color: #A29BFE;
  font-weight: 600;
}

/* ---- Card ---- */
.onboarding__card {
  width: 100%;
  max-width: 420px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 20px;
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.onboarding__card--editor {
  text-align: left;
  padding-bottom: 1.5rem;
}

.onboarding__card--published {
  padding: 2.5rem 1.5rem;
}

.onboarding__logo {
  font-size: 1.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, #6C5CE7, #A29BFE);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
  letter-spacing: 2px;
}

.onboarding__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.onboarding__subtitle {
  font-size: 0.875rem;
  color: #888;
  margin-bottom: 1.5rem;
  line-height: 1.4;
}

/* ---- Email input with check button ---- */
.input-with-btn {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.input-with-btn input {
  flex: 1;
  min-width: 0;
}

.btn-check {
  padding: 0 16px;
  background: #F3F0FF;
  color: #6C5CE7;
  border: 1.5px solid #D6D0F7;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.btn-check:hover {
  background: #E8E3FF;
  border-color: #6C5CE7;
}

.field-status {
  margin-top: 6px;
  font-size: 0.8rem;
  font-weight: 500;
}

/* ---- Auth Tabs ---- */
.auth-tabs {
  display: flex;
  background: #F3F4F6;
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 1.5rem;
}

.auth-tab {
  flex: 1;
  padding: 10px;
  border-radius: 10px;
  background: transparent;
  color: #999;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.auth-tab.active {
  background: #FFFFFF;
  color: #1A1A2E;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* ---- Form ---- */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-group {
  text-align: left;
}

.form-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #555;
  margin-bottom: 6px;
}

.form-group input {
  width: 100%;
  padding: 12px 14px;
  background: #F9FAFB;
  border: 1.5px solid #E5E7EB;
  border-radius: 10px;
  color: #1A1A2E;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s ease;
}

.form-group input:focus {
  border-color: #6C5CE7;
  background: #FFFFFF;
}

.form-group input::placeholder {
  color: #B0B0B0;
}

/* ---- Buttons ---- */
.btn-next {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #6C5CE7, #A29BFE);
  color: #fff;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  margin-top: 0.5rem;
  transition: all 0.2s ease;
  box-shadow: 0 4px 15px rgba(108, 92, 231, 0.4);
}

.btn-next:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(108, 92, 231, 0.5);
}

.btn-next:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.btn-back {
  flex: 1;
  padding: 14px;
  background: transparent;
  color: #888;
  border: 1.5px solid #E5E7EB;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
}

.btn-row {
  display: flex;
  gap: 12px;
  margin-top: 1rem;
}

.btn-row .btn-next {
  flex: 2;
  margin-top: 0;
}

.error-msg {
  color: #FF7675;
  font-size: 0.85rem;
  font-weight: 500;
  margin-top: 0.5rem;
  text-align: center;
}

/* ---- Subdomain Input ---- */
.subdomain-input-wrap {
  display: flex;
  align-items: center;
  background: #F9FAFB;
  border: 1.5px solid #E5E7EB;
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.subdomain-input-wrap:focus-within {
  border-color: #6C5CE7;
  background: #FFFFFF;
}

.subdomain-prefix {
  padding: 12px 0 12px 14px;
  color: #999;
  font-size: 0.95rem;
  font-weight: 500;
  flex-shrink: 0;
  user-select: none;
}

.subdomain-input {
  flex: 1;
  padding: 12px 14px 12px 2px;
  background: transparent;
  border: none;
  color: #1A1A2E;
  font-size: 0.95rem;
  font-weight: 600;
  outline: none;
}

.subdomain-input::placeholder {
  color: #B0B0B0;
  font-weight: 400;
}

/* ---- Subdomain Status ---- */
.subdomain-status {
  min-height: 28px;
  margin-top: 8px;
  font-size: 0.85rem;
  font-weight: 500;
}

.status-checking { color: #FDCB6E; }
.status-available { color: #00B894; }
.status-taken { color: #FF7675; }

.subdomain-preview {
  background: #F3F0FF;
  border: 1px solid #D6D0F7;
  border-radius: 10px;
  padding: 12px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.preview-label {
  font-size: 0.75rem;
  color: #888;
  font-weight: 500;
}

.preview-url {
  font-size: 0.95rem;
  color: #A29BFE;
  font-weight: 600;
  word-break: break-all;
}

/* ---- Profile Edit Section ---- */
.profile-edit-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 0.5rem;
}

.avatar-upload {
  min-width: 80px;
  min-height: 80px;
  border-radius: 16px;
  background: #F3F4F6;
  border: 2px dashed #D1D5DB;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.2s ease;
  max-width: 100%;
}

/* 이미지가 없을 때만 원형 */
.avatar-upload:not(.has-image) {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.avatar-upload:hover {
  border-color: #6C5CE7;
  background: #F3F0FF;
}

.avatar-img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 300px;
  object-fit: contain;
}

.avatar-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #999;
  line-height: 1.2;
}

.avatar-placeholder span:first-child {
  font-size: 1.5rem;
  font-weight: 300;
}

.avatar-label {
  font-size: 0.65rem;
  font-weight: 600;
}

.profile-name-input {
  width: 100%;
  max-width: 260px;
  padding: 10px 14px;
  background: #F9FAFB;
  border: 1.5px solid #E5E7EB;
  border-radius: 10px;
  color: #1A1A2E;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  outline: none;
  transition: border-color 0.2s ease;
}

.profile-name-input:focus {
  border-color: #6C5CE7;
  background: #FFFFFF;
}

.profile-name-input::placeholder {
  color: #B0B0B0;
  font-weight: 400;
}

.profile-bio-input {
  width: 100%;
  padding: 10px 14px;
  background: #F9FAFB;
  border: 1.5px solid #E5E7EB;
  border-radius: 10px;
  color: #1A1A2E;
  font-size: 0.875rem;
  text-align: center;
  outline: none;
  resize: none;
  line-height: 1.5;
  transition: border-color 0.2s ease;
}

.profile-bio-input:focus {
  border-color: #6C5CE7;
  background: #FFFFFF;
}

.profile-bio-input::placeholder {
  color: #B0B0B0;
}

.bio-counter {
  font-size: 0.7rem;
  color: #B0B0B0;
  align-self: flex-end;
}

.section-divider {
  width: 100%;
  height: 1px;
  background: #E5E7EB;
  margin: 1rem 0;
}

/* ---- Link Editor ---- */
.link-list {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.empty-links {
  text-align: center;
  padding: 2rem 1rem;
  color: #999;
}

.empty-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 0.75rem;
}

.empty-links p {
  margin: 0;
  font-size: 0.9rem;
}

.empty-hint {
  font-size: 0.8rem !important;
  margin-top: 4px !important;
  color: #BBB;
}

.editor-link-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 10px 12px;
  transition: all 0.2s ease;
}

.editor-link-item.inactive {
  opacity: 0.45;
}

.editor-link-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.editor-link-icon-img {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: cover;
}

.editor-link-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.editor-link-title {
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.editor-link-url {
  font-size: 0.7rem;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.editor-link-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.action-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  transition: background 0.15s ease;
}

.action-btn:hover {
  background: #E9ECF0;
}

.action-btn--delete:hover {
  background: #FEE2E2;
}

/* ---- Add Link Form ---- */
.add-link-form {
  background: #F9FAFB;
  border: 1.5px solid #E5E7EB;
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.icon-picker-btn {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.15s ease;
}

.icon-picker-btn:hover {
  border-color: #6C5CE7;
}

.icon-picker-img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
}

.icon-picker-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.icon-upload-row {
  display: flex;
}

.btn-icon-upload {
  width: 100%;
  padding: 10px;
  background: #F3F0FF;
  color: #6C5CE7;
  border: 1.5px dashed #D6D0F7;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-icon-upload:hover {
  background: #E8E3FF;
  border-color: #6C5CE7;
}

.icon-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  padding: 8px;
  background: #FFFFFF;
  border-radius: 10px;
  border: 1px solid #E5E7EB;
}

.icon-option {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: transparent;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.icon-option:hover,
.icon-option.selected {
  background: #F3F0FF;
}

.link-title-input,
.link-url-input {
  width: 100%;
  padding: 12px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  color: #1A1A2E;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s ease;
}

.link-title-input {
  flex: 1;
  resize: none;
  line-height: 1.4;
  font-family: inherit;
}

.link-title-input:focus,
.link-url-input:focus {
  border-color: #6C5CE7;
}

.link-title-input::placeholder,
.link-url-input::placeholder {
  color: #B0B0B0;
}

.form-actions {
  display: flex;
  gap: 8px;
}

.btn-cancel {
  flex: 1;
  padding: 10px;
  background: transparent;
  color: #888;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
}

.btn-save {
  flex: 1;
  padding: 10px;
  background: #6C5CE7;
  color: #fff;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 700;
  transition: opacity 0.15s ease;
}

.btn-save:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---- Background Color Picker ---- */
.bg-color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 1rem;
}

.bg-color-option {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #E5E7EB;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.bg-color-option:hover {
  transform: scale(1.15);
}

.bg-color-option.selected {
  border-color: #6C5CE7;
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.3);
}

.bg-color-custom {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px dashed #D6D0F7;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
  background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
}

.bg-color-custom span {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  z-index: 1;
  pointer-events: none;
}

.bg-color-custom input[type="color"] {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.bg-color-custom:hover {
  transform: scale(1.15);
}

.btn-add-link {
  width: 100%;
  padding: 14px;
  background: transparent;
  color: #6C5CE7;
  border: 2px dashed #D6D0F7;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 1rem;
  transition: all 0.2s ease;
}

.btn-add-link:hover {
  border-color: #6C5CE7;
  background: #F9F7FF;
}

.btn-publish {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #00B894, #00CEC9);
  color: #fff;
  border-radius: 14px;
  font-size: 1.05rem;
  font-weight: 700;
  margin-top: 0.5rem;
  transition: all 0.2s ease;
  box-shadow: 0 4px 15px rgba(0, 184, 148, 0.4);
}

.btn-publish:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(0, 184, 148, 0.5);
}

/* ---- Published Step ---- */
.published-check {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00B894, #00CEC9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  margin: 0 auto 1.5rem;
  box-shadow: 0 8px 30px rgba(0, 184, 148, 0.4);
  animation: scaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes scaleIn {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

.published-url-box {
  display: flex;
  align-items: center;
  background: #F9FAFB;
  border: 1.5px solid #E5E7EB;
  border-radius: 12px;
  padding: 4px 4px 4px 14px;
  margin: 1.5rem 0;
  gap: 8px;
}

.published-url {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 600;
  color: #A29BFE;
  word-break: break-all;
}

.btn-copy {
  padding: 10px 18px;
  background: #6C5CE7;
  color: #fff;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.btn-copy:hover {
  background: #5A4BD1;
}

.published-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-view {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #6C5CE7, #A29BFE);
  color: #fff;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(108, 92, 231, 0.4);
  transition: all 0.2s ease;
}

.btn-view:hover {
  transform: translateY(-2px);
}

.btn-edit-more {
  width: 100%;
  padding: 14px;
  background: transparent;
  color: #888;
  border: 1.5px solid #E5E7EB;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-edit-more:hover {
  border-color: #6C5CE7;
  color: #1A1A2E;
}

/* ---- Animation ---- */
.fadeInUp {
  animation: fadeInUp 0.4s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Responsive (already mobile-first, desktop tweaks) ---- */
@media (min-width: 481px) {
  .onboarding {
    padding: 3rem 1.5rem;
  }

  .onboarding__card {
    padding: 2.5rem 2rem;
  }
}

@media (max-width: 360px) {
  .onboarding__card {
    padding: 1.5rem 1rem;
  }

  .icon-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .progress-line {
    width: 28px;
  }

  .onboarding__step-labels {
    gap: 22px;
  }
}
/* ============================================
   Manager Section - Login, Signup, Dashboard
   ============================================ */

* {
  box-sizing: border-box;
}

/* ============================================
   MANAGER LOGIN PAGE
   ============================================ */

.manager-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EEF2F7;
  font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans KR', 'Segoe UI', 'Roboto', sans-serif;
  padding: 1rem;
}

.manager-login__card {
  width: 100%;
  max-width: 440px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 2.25rem 1.75rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  color: #1F2937;
}

.manager-login__logo {
  text-align: center;
  font-size: 1.75rem;
  font-weight: 800;
  color: #1F2937;
  margin-bottom: 1.5rem;
  letter-spacing: 2px;
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  background-clip: unset;
}

.manager-login__tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding: 4px;
  background: #F3F4F6;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
}

.manager-login__tab {
  flex: 1;
  padding: 0.7rem 0;
  background: transparent;
  border: none;
  color: #9CA3AF;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 10px;
}

.manager-login__tab:hover {
  color: #6B7280;
}

.manager-login__tab--active {
  background: #FFFFFF;
  color: #1F2937;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.manager-login__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.manager-login__error {
  color: #DC2626;
  font-size: 0.85rem;
  text-align: center;
  padding: 10px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 10px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group__label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #374151;
}

.form-group__input {
  padding: 0.85rem 0.95rem;
  background: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-radius: 10px;
  color: #1F2937;
  font-size: 1rem;
  font-family: inherit;
  transition: all 0.2s ease;
}

.form-group__input::placeholder {
  color: #9CA3AF;
}

.form-group__input:focus {
  outline: none;
  background: #FFFFFF;
  border-color: #3B82F6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.form-group__prefix {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 0.95rem;
  background: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-radius: 10px;
  font-size: 0.95rem;
  color: #1F2937;
}

.form-group__prefix-text {
  color: #9CA3AF;
}

.form-group__prefix-input {
  flex: 1;
  padding: 0;
  background: none;
  border: none;
  color: #1F2937;
  font-size: 1rem;
  font-family: inherit;
}

.form-group__prefix-input::placeholder {
  color: #9CA3AF;
}

.form-group__prefix-input:focus {
  outline: none;
}

.form-group__checkbox {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}

.form-group__checkbox input {
  width: 18px;
  height: 18px;
  accent-color: #3B82F6;
  cursor: pointer;
}

.form-group__checkbox label {
  font-size: 0.9rem;
  color: #4B5563;
  cursor: pointer;
}

.form-group__checkbox a {
  color: #3B82F6;
  text-decoration: none;
  transition: color 0.2s ease;
}

.form-group__checkbox a:hover {
  color: #2563EB;
}

.form-group__help {
  font-size: 0.85rem;
  color: #9CA3AF;
}

.manager-login__submit {
  padding: 0.95rem;
  background: #3B82F6;
  border: none;
  border-radius: 12px;
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 0.25rem;
}

.manager-login__submit:hover {
  background: #2563EB;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.35);
}

.manager-login__submit:active {
  transform: translateY(0);
}

.manager-login__submit:disabled {
  background: #D1D5DB;
  color: #9CA3AF;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.manager-login__divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.25rem 0 1rem;
  color: #9CA3AF;
  font-size: 0.85rem;
}

.manager-login__divider::before,
.manager-login__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #E5E7EB;
}

/* 소셜 OAuth 버튼 스택 */
.manager-login__social-stack {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.25rem;
}

.social-btn {
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0 1rem;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.2s ease, box-shadow 0.2s ease;
  border: none;
  white-space: nowrap;
}

.social-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.social-btn:active:not(:disabled) {
  transform: translateY(0);
}

.social-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.social-btn__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-weight: 900;
  font-size: 0.9rem;
}

.social-btn__label {
  flex: 0 1 auto;
}

.social-btn--naver {
  background: #03C75A;
  color: #FFFFFF;
}

.social-btn--naver .social-btn__logo {
  background: transparent;
  color: #FFFFFF;
}

.social-btn--kakao {
  background: #FEE500;
  color: #111111;
}

.social-btn--kakao .social-btn__logo {
  color: #111111;
}

.social-btn--google {
  background: #FFFFFF;
  color: #1F2937;
  border: 1px solid #E5E7EB;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.social-btn--apple {
  background: #1F2937;
  color: #FFFFFF;
}

/* 역할 선택 */
.manager-login__role-step {
  padding: 0.25rem 0;
}

.manager-login__role-title {
  text-align: center;
  margin: 0 0 1.25rem;
  color: #1F2937;
  font-size: 1.05rem;
  font-weight: 700;
}

.role-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1rem 1.1rem;
  margin-bottom: 0.65rem;
  background: #FFFFFF;
  border: 2px solid #E5E7EB;
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
  color: #1F2937;
  font-family: inherit;
}

.role-card:hover {
  border-color: #D1D5DB;
  background: #F9FAFB;
}

.role-card--active {
  border-color: #3B82F6;
  background: rgba(59, 130, 246, 0.06);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.role-card__icon {
  font-size: 1.8rem;
  flex-shrink: 0;
}

.role-card__body {
  flex: 1;
  min-width: 0;
}

.role-card__title {
  font-weight: 700;
  font-size: 0.98rem;
  color: #1F2937;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.role-card__badge {
  display: inline-block;
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 10px;
  color: #FFFFFF;
  font-weight: 700;
}

.role-card__desc {
  font-size: 0.82rem;
  color: #6B7280;
  margin-top: 3px;
  line-height: 1.4;
}

.manager-login__back {
  background: none;
  border: none;
  cursor: pointer;
  color: #3B82F6;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
  padding: 0;
  align-self: flex-start;
}

.manager-login__role-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  color: #2563EB;
  align-self: flex-start;
}

.manager-login__forgot {
  text-align: center;
  margin-top: 1rem;
}

.manager-login__forgot a {
  color: #3B82F6;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.manager-login__forgot a:hover {
  color: #2563EB;
}

/* ============================================
   MANAGER DASHBOARD
   ============================================ */

.manager-dashboard {
  min-height: 100vh;
  display: flex;
  background: #FFFFFF;
  font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans KR', 'Segoe UI', 'Roboto', sans-serif;
}
.manager-dashboard__topbar { display: none; }
.manager-dashboard__overlay { display: none; }

.manager-dashboard__sidebar {
  width: 280px;
  background: #F9FAFB;
  border-right: 1px solid #E5E7EB;
  display: flex;
  flex-direction: column;
  position: fixed;
  height: 100vh;
  left: 0;
  top: 0;
  z-index: 50;
}

.manager-dashboard__sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 0;
}

.manager-dashboard__logo {
  display: block;
  width: 100%;
  padding: 0 1.5rem 1.5rem 1.5rem;
  font-size: 1.75rem;
  font-weight: 700;
  color: #6C5CE7;
  border: none;
  border-bottom: 1px solid #E5E7EB;
  background: transparent;
  text-align: left;
  cursor: pointer;
  margin-bottom: 0;
  transition: opacity 0.15s, color 0.15s;
}
.manager-dashboard__logo:hover { opacity: 0.75; }
.manager-dashboard__logo:active { opacity: 0.55; }

.manager-dashboard__topbar-logo {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.15s;
}
.manager-dashboard__topbar-logo:hover { opacity: 0.75; }

.manager-dashboard__nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 1rem;
}

.manager-dashboard__nav-item {
  padding: 1rem;
  background: none;
  border: none;
  color: #777;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s ease;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.manager-dashboard__nav-item:hover {
  color: #333;
  background: #F3F0FF;
}

.manager-dashboard__nav-item--active {
  color: #6C5CE7;
  background: #F3F0FF;
}

.manager-dashboard__plan-info {
  margin: 0 1rem 1rem 1rem;
  padding: 0.75rem;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.manager-dashboard__plan-badge {
  padding: 3px 8px; border-radius: 6px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.5px;
  background: #F3F0FF; color: #6C5CE7; border: 1px solid #D6D0F7;
}
.manager-dashboard__plan-label { font-size: 0.8rem; color: #888; font-weight: 500; }

.manager-dashboard__logout {
  margin: auto 1rem 1rem 1rem;
  padding: 0.875rem;
  background: rgba(255, 99, 71, 0.1);
  border: 1px solid rgba(255, 99, 71, 0.3);
  border-radius: 8px;
  color: #FF6347;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  width: calc(100% - 2rem);
}

.manager-dashboard__logout:hover {
  background: rgba(255, 99, 71, 0.2);
  border-color: rgba(255, 99, 71, 0.5);
}

.manager-dashboard__main {
  flex: 1;
  margin-left: 280px;
  padding: 2rem;
  overflow-y: auto;
}

.manager-dashboard__content {
  max-width: 1400px;
  margin: 0 auto;
}

/* Panel Headers */
.manager-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.manager-panel__title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1A1A2E;
  margin: 0;
}

.manager-panel__action {
  padding: 0.75rem 1.5rem;
  background: #6C5CE7;
  border: none;
  border-radius: 8px;
  color: #FFFFFF;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.manager-panel__action:hover {
  background: #7D6FFF;
  transform: translateY(-2px);
}

/* Links Panel */
.links-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.link-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.link-row:hover {
  border-color: #6C5CE7;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.link-row__drag {
  color: #BBB;
  cursor: grab;
  font-size: 1rem;
  flex-shrink: 0;
}

.link-row__icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.link-row__info {
  flex: 1;
  min-width: 0;
}

.link-row__title {
  font-size: 1rem;
  font-weight: 600;
  color: #1A1A2E;
  margin-bottom: 0.25rem;
}

.link-row__url {
  font-size: 0.85rem;
  color: #999;
  word-break: break-all;
}

.link-row__stats {
  display: flex;
  gap: 1.5rem;
  margin: 0.75rem 0 0 0;
  font-size: 0.85rem;
}

.link-row__stat {
  color: #888;
}

.link-row__stat-value {
  color: #6C5CE7;
  font-weight: 600;
}

.link-row__type {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  background: rgba(108, 92, 231, 0.15);
  border: 1px solid rgba(108, 92, 231, 0.3);
  border-radius: 6px;
  font-size: 0.8rem;
  color: #6C5CE7;
  font-weight: 600;
}

.link-row__toggle {
  display: flex;
  align-items: center;
}

.toggle-switch {
  position: relative;
  width: 48px;
  height: 26px;
  background: #F3F4F6;
  border-radius: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.toggle-switch--active {
  background: #6C5CE7;
  border-color: #6C5CE7;
}

.toggle-switch__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #FFFFFF;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.toggle-switch--active .toggle-switch__knob {
  left: 25px;
}

.link-row__actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.link-row__action-btn {
  padding: 0.5rem 0.75rem;
  background: rgba(108, 92, 231, 0.1);
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  color: #6C5CE7;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.link-row__action-btn:hover {
  background: rgba(108, 92, 231, 0.2);
  border-color: #6C5CE7;
}

.link-row__action-btn--delete {
  background: rgba(255, 99, 71, 0.1);
  border-color: rgba(255, 99, 71, 0.2);
  color: #FF6347;
}

.link-row__action-btn--delete:hover {
  background: rgba(255, 99, 71, 0.2);
  border-color: rgba(255, 99, 71, 0.4);
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 100;
  align-items: center;
  justify-content: center;
}

.modal--active {
  display: flex;
}

.modal__content {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 2rem;
  width: 100%;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.modal__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1A1A2E;
  margin: 0;
}

.modal__close {
  background: none;
  border: none;
  color: #888;
  font-size: 1.5rem;
  cursor: pointer;
  transition: color 0.2s ease;
}

.modal__close:hover {
  color: #FFFFFF;
}

.modal__form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.modal__section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.modal__label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #333;
}

.modal__select {
  padding: 0.875rem;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  color: #1A1A2E;
  font-size: 1rem;
  font-family: inherit;
  transition: all 0.2s ease;
}

.modal__select:focus {
  outline: none;
  background: #FFFFFF;
  border-color: #6C5CE7;
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.1);
}

.modal__emoji-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.75rem;
}

.modal__emoji-btn {
  padding: 0.75rem;
  background: #F9FAFB;
  border: 2px solid #E5E7EB;
  border-radius: 8px;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
}

.modal__emoji-btn:hover {
  background: #F3F4F6;
  border-color: rgba(108, 92, 231, 0.3);
}

.modal__emoji-btn--selected {
  background: rgba(108, 92, 231, 0.3);
  border-color: #6C5CE7;
}

.modal__footer {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.modal__cancel {
  flex: 1;
  padding: 0.875rem;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  color: #555;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal__cancel:hover {
  background: #F3F4F6;
}

.modal__save {
  flex: 1;
  padding: 0.875rem;
  background: #6C5CE7;
  border: none;
  border-radius: 8px;
  color: #FFFFFF;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal__save:hover {
  background: #7D6FFF;
}

/* Theme Panel */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.theme-card {
  padding: 1rem;
  background: #F9FAFB;
  border: 2px solid #E5E7EB;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  text-align: center;
}

.theme-card:hover {
  border-color: #6C5CE7;
  transform: translateY(-4px);
}

.theme-card--active {
  border-color: #6C5CE7;
  background: rgba(108, 92, 231, 0.1);
}

.theme-card__preview {
  width: 100%;
  height: 80px;
  border-radius: 8px;
  border: 1px solid #E5E7EB;
}

.theme-card__name {
  font-size: 0.95rem;
  font-weight: 600;
  color: #333;
  margin: 0;
}

/* Stats Cards */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.stat-card {
  padding: 1.5rem;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
}

.stat-card__label {
  font-size: 0.85rem;
  color: #888;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.75rem;
}

.stat-card__value {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1A1A2E;
  margin-bottom: 0.5rem;
}

.stat-card__change {
  font-size: 0.85rem;
  color: #888;
}

.stat-card__change--positive {
  color: #00B894;
}

.stat-card__change--negative {
  color: #FF6347;
}

/* Charts */
.chart-container {
  margin-bottom: 2rem;
}

.chart-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1A1A2E;
  margin-bottom: 1.25rem;
}

.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  height: 200px;
  padding: 1rem;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
}

.bar-chart__bar {
  flex: 1;
  background: linear-gradient(180deg, #6C5CE7, #5A4FB8);
  border-radius: 4px 4px 0 0;
  min-height: 10px;
  position: relative;
  transition: all 0.2s ease;
}

.bar-chart__bar:hover {
  opacity: 0.8;
}

.bar-chart__label {
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  color: #999;
  width: 100%;
  text-align: center;
}

.progress-bar-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid #E5E7EB;
}

.progress-bar-item:last-child {
  border-bottom: none;
}

.progress-bar-item__label {
  flex: 1;
  min-width: 0;
  font-size: 0.95rem;
  color: #555;
}

.progress-bar-item__bar {
  flex: 2;
  height: 6px;
  background: rgba(108, 92, 231, 0.2);
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar-item__fill {
  height: 100%;
  background: linear-gradient(90deg, #6C5CE7, #7D6FFF);
  border-radius: 3px;
}

.progress-bar-item__value {
  flex: 0 0 50px;
  text-align: right;
  font-size: 0.9rem;
  font-weight: 600;
  color: #6C5CE7;
}

/* Settings Panel */
.settings-section {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #E5E7EB;
}

.settings-section:last-child {
  border-bottom: none;
}

.settings-section__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1A1A2E;
  margin-bottom: 1.25rem;
}

.settings-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.settings-input-row {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
}

.settings-input-row__prefix {
  font-size: 0.95rem;
  color: #888;
  flex-shrink: 0;
}

.settings-input-row__input {
  flex: 1;
  padding: 0.875rem;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  color: #1A1A2E;
  font-size: 1rem;
  font-family: inherit;
}

.settings-input-row__input:focus {
  outline: none;
  background: #FFFFFF;
  border-color: #6C5CE7;
}

.settings-textarea {
  padding: 0.875rem;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  color: #1A1A2E;
  font-size: 1rem;
  font-family: inherit;
  resize: vertical;
  min-height: 100px;
}

.settings-textarea:focus {
  outline: none;
  background: #FFFFFF;
  border-color: #6C5CE7;
}

.plan-badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: rgba(108, 92, 231, 0.15);
  border: 1px solid rgba(108, 92, 231, 0.3);
  border-radius: 6px;
  color: #6C5CE7;
  font-weight: 600;
  font-size: 0.9rem;
}

.plan-badge--pro {
  background: rgba(0, 184, 148, 0.15);
  border-color: rgba(0, 184, 148, 0.3);
  color: #00B894;
}

.upgrade-btn {
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #6C5CE7, #7D6FFF);
  border: none;
  border-radius: 8px;
  color: #FFFFFF;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  align-self: flex-start;
}

.upgrade-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(108, 92, 231, 0.3);
}

/* ============================================
   EDIT PANEL (온보딩 스타일 간편 편집)
   ============================================ */

.manager-edit-panel { max-width: 500px; }

/* ============================================
   EDIT SPLIT VIEW — PC 나란히 / 모바일 상하 스택
   ============================================ */

.edit-split { width: 100%; }

.edit-split__panels {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  width: 100%;
}

/* 패널 공통: flex 안에서 자연 축소 허용 */
.edit-split__main,
.edit-split__side {
  min-width: 0;
}

/* activePanel === 'edit' — 편집 패널만 표시. 기존 500px 중앙 정렬 유지 */
.edit-split[data-mode='edit'] .edit-split__main {
  max-width: 500px;
  margin: 0 auto;
  flex: 1 1 auto;
}

/* activePanel === 'links' — 두 패널 나란히 */
.edit-split[data-mode='links'] .edit-split__main {
  flex: 1 1 50%;
  max-width: 520px;
  position: sticky;
  top: 16px;     /* 스크롤 시 편집 미리보기가 위에 붙어 따라옴 */
}
.edit-split[data-mode='links'] .edit-split__side {
  flex: 1 1 50%;
  max-width: 560px;
}

/* 모바일: 상하 스택 (편집 위, 콘텐츠 추가 아래) */
@media (max-width: 900px) {
  .edit-split__panels {
    flex-direction: column;
    gap: 16px;
  }
  .edit-split[data-mode='edit'] .edit-split__main,
  .edit-split[data-mode='links'] .edit-split__main,
  .edit-split[data-mode='links'] .edit-split__side {
    max-width: 100%;
    width: 100%;
    margin: 0;
    position: static;  /* 모바일은 sticky 해제 */
  }
}

/* ============================================
   DASHBOARD TWO-COL LAYOUT — edit/links 외 모든 패널에서
   왼쪽 mini preview sticky + 오른쪽 본문
   ============================================ */

.manager-dashboard__content.dashboard-two-col {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.dashboard-preview-col {
  flex: 0 0 300px;
  position: sticky;
  top: 16px;
  align-self: flex-start;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

.dashboard-main-col {
  flex: 1;
  min-width: 0;
  width: 100%;
}

.dashboard-preview-panel {
  padding: 20px 16px;
  border-radius: 20px;
  border: 1px solid #E5E7EB;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.dashboard-preview-header { text-align: center; margin-bottom: 16px; }
.dashboard-preview-avatar {
  width: 72px; height: 72px;
  object-fit: cover;
  margin: 0 auto 10px;
  display: block;
}
.dashboard-preview-avatar--placeholder {
  background: linear-gradient(135deg, #6C5CE7, #6C5CE788);
  color: #fff;
  font-size: 1.8rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dashboard-preview-name {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 4px;
  color: #1A1A2E;
}
.dashboard-preview-bio {
  font-size: 0.8rem;
  color: #777;
  margin: 0;
  line-height: 1.5;
}
.dashboard-preview-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.dashboard-preview-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  font-size: 0.85rem;
}
.dashboard-preview-link-icon { font-size: 1.1rem; flex-shrink: 0; }
.dashboard-preview-link-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1A1A2E;
  font-weight: 600;
  min-width: 0;
}
.dashboard-preview-empty {
  text-align: center;
  padding: 24px 10px;
  color: #B0B0B0;
  font-size: 0.8rem;
  background: #F9FAFB;
  border-radius: 12px;
}
.dashboard-preview-more {
  text-align: center;
  padding: 8px;
  color: #999;
  font-size: 0.75rem;
}
.dashboard-preview-edit-btn {
  width: 100%;
  padding: 10px;
  background: #6C5CE7;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.dashboard-preview-edit-btn:hover { background: #5B4CCB; }

@media (max-width: 900px) {
  .manager-dashboard__content.dashboard-two-col {
    flex-direction: column;
    gap: 16px;
  }
  .dashboard-preview-col {
    flex: 0 0 auto;
    position: static;
    width: 100%;
    max-height: none;
    overflow: visible;
  }
}

.edit-profile-section { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 0.5rem; }

.edit-avatar-upload { min-width: 80px; min-height: 80px; border-radius: 16px; background: #F3F4F6; border: 2px dashed #D1D5DB; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; transition: all 0.2s ease; max-width: 100%; }
.edit-avatar-upload:not(.has-image) { width: 80px; height: 80px; border-radius: 50%; }
.edit-avatar-upload:hover { border-color: #6C5CE7; background: #F3F0FF; }
.edit-avatar-img { width: 100%; height: auto; display: block; max-height: 200px; object-fit: contain; }
.edit-avatar-placeholder { display: flex; flex-direction: column; align-items: center; color: #999; line-height: 1.2; }
.edit-avatar-placeholder span:first-child { font-size: 1.5rem; font-weight: 300; }
.edit-avatar-label { font-size: 0.65rem; font-weight: 600; }

.edit-name-input { width: 100%; max-width: 280px; padding: 10px 14px; background: #F9FAFB; border: 1.5px solid #E5E7EB; border-radius: 10px; color: #1A1A2E; font-size: 1rem; font-weight: 600; text-align: center; outline: none; }
.edit-name-input:focus { border-color: #6C5CE7; background: #fff; }
.edit-name-input::placeholder { color: #B0B0B0; font-weight: 400; }

.edit-bio-input { width: 100%; padding: 10px 14px; background: #F9FAFB; border: 1.5px solid #E5E7EB; border-radius: 10px; color: #1A1A2E; font-size: 0.875rem; text-align: center; outline: none; resize: none; line-height: 1.5; font-family: inherit; }
.edit-bio-input:focus { border-color: #6C5CE7; background: #fff; }
.edit-bio-input::placeholder { color: #B0B0B0; }
.edit-bio-counter { font-size: 0.7rem; color: #B0B0B0; align-self: flex-end; }

.edit-divider { width: 100%; height: 1px; background: #E5E7EB; margin: 1.5rem 0; }
.edit-section-title { font-size: 1rem; font-weight: 700; color: #1A1A2E; margin-bottom: 1rem; }

/* 링크 목록 */
.edit-link-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 1rem; }
.edit-empty { text-align: center; padding: 2rem 1rem; color: #999; }
.edit-empty p { margin: 0.5rem 0 0; font-size: 0.9rem; }

/* 3탭 바 */
.edit-tab-bar { display: flex; gap: 0; margin-bottom: 1rem; background: #F3F4F6; border-radius: 12px; padding: 3px; }
.edit-tab-btn { flex: 1; padding: 9px 6px; border: none; border-radius: 10px; font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: all 0.2s ease; background: transparent; color: #1A1A2E; display: flex; align-items: center; justify-content: center; gap: 4px; }
.edit-tab-btn--active { background: #6C5CE7; color: #fff; box-shadow: 0 1px 4px rgba(108,92,231,0.3); }
.edit-tab-btn__count { font-size: 0.65rem; background: #D1D5DB; padding: 1px 5px; border-radius: 8px; color: #555; }
.edit-tab-btn--active .edit-tab-btn__count { background: rgba(255,255,255,0.3); color: #fff; }

.edit-link-item { display: flex; align-items: center; gap: 8px; background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 12px; padding: 8px 10px; }
.edit-link-item--inactive { opacity: 0.45; }
.edit-link-order { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.edit-order-btn { width: 22px; height: 16px; border: none; background: transparent; color: #BBB; font-size: 0.6rem; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 3px; padding: 0; }
.edit-order-btn:hover:not(:disabled) { background: #F3F0FF; color: #6C5CE7; }
.edit-order-btn:disabled { color: #E5E7EB; cursor: default; }
.edit-link-actions-col { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.edit-link-move { position: relative; flex-shrink: 0; }
.edit-move-toggle { width: 24px; height: 24px; border: none; background: transparent; font-size: 1rem; color: #999; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.edit-move-toggle:hover { background: #F3F0FF; color: #6C5CE7; }
.edit-move-menu { position: absolute; right: 0; top: 28px; z-index: 10; flex-direction: column; gap: 4px; background: #fff; border: 1px solid #E5E7EB; border-radius: 10px; padding: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); min-width: 120px; }
.edit-move-section { display: flex; align-items: center; gap: 4px; padding: 4px 2px; }
.edit-move-btn { padding: 3px 8px; border: 1px solid #E5E7EB; border-radius: 6px; font-size: 0.6rem; font-weight: 600; cursor: pointer; background: #F9FAFB; color: #555; }
.edit-move-btn:hover { background: #6C5CE7; color: #fff; border-color: #6C5CE7; }
.edit-link-icon { font-size: 1.25rem; flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.edit-link-icon-img { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; }
.edit-link-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.edit-link-title { font-size: 0.875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #1A1A2E; }
.edit-link-url { font-size: 0.7rem; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.edit-link-actions { display: flex; gap: 4px; flex-shrink: 0; }
.edit-action-btn { width: 32px; height: 32px; border-radius: 8px; background: transparent; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }
.edit-action-btn:hover { background: #E9ECF0; }
.edit-action-btn--delete:hover { background: #FEE2E2; }

/* 추가 폼 */
.edit-add-form { background: #F9FAFB; border: 1.5px solid #E5E7EB; border-radius: 14px; padding: 14px; margin-bottom: 1rem; display: flex; flex-direction: column; gap: 10px; }
.edit-form-row { display: flex; gap: 8px; align-items: center; }
.edit-icon-picker-btn { width: 44px; height: 44px; border-radius: 10px; background: #fff; border: 1px solid #E5E7EB; font-size: 1.25rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.edit-icon-picker-btn:hover { border-color: #6C5CE7; }

.edit-icon-panel { display: flex; flex-direction: column; gap: 8px; }
.edit-icon-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; padding: 8px; background: #fff; border-radius: 10px; border: 1px solid #E5E7EB; }
.edit-icon-option { width: 36px; height: 36px; border-radius: 8px; background: transparent; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; }
.edit-icon-option:hover, .edit-icon-option.selected { background: #F3F0FF; }
.edit-icon-upload-btn { padding: 10px; background: #F3F0FF; color: #6C5CE7; border: 1.5px dashed #D6D0F7; border-radius: 10px; font-size: 0.8rem; font-weight: 600; }
.edit-icon-upload-btn:hover { background: #E8E3FF; border-color: #6C5CE7; }

.edit-link-title-input, .edit-link-url-input { width: 100%; padding: 12px; background: #fff; border: 1px solid #E5E7EB; border-radius: 10px; color: #1A1A2E; font-size: 0.9rem; outline: none; font-family: inherit; }
.edit-link-title-input { flex: 1; resize: none; line-height: 1.4; }
.edit-link-title-input:focus, .edit-link-url-input:focus { border-color: #6C5CE7; }
.edit-link-title-input::placeholder, .edit-link-url-input::placeholder { color: #B0B0B0; }

.edit-form-actions { display: flex; gap: 8px; }
.edit-btn-cancel { flex: 1; padding: 10px; background: transparent; color: #888; border: 1px solid #E5E7EB; border-radius: 10px; font-size: 0.875rem; font-weight: 600; }
.edit-btn-save { flex: 1; padding: 10px; background: #6C5CE7; color: #fff; border-radius: 10px; font-size: 0.875rem; font-weight: 700; }
.edit-btn-save:disabled { opacity: 0.4; cursor: not-allowed; }

.edit-btn-add { width: 100%; padding: 14px; background: transparent; color: #6C5CE7; border: 2px dashed #D6D0F7; border-radius: 14px; font-size: 0.95rem; font-weight: 600; margin-bottom: 1rem; }
.edit-btn-add:hover { border-color: #6C5CE7; background: #F9F7FF; }

/* 배경색 */
.edit-bg-picker { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; margin-bottom: 1.5rem; }
.edit-bg-option { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #E5E7EB; cursor: pointer; transition: all 0.2s ease; }
.edit-bg-option:hover { transform: scale(1.15); }
.edit-bg-option.selected { border-color: #6C5CE7; box-shadow: 0 0 0 3px rgba(108,92,231,0.3); }
.edit-bg-custom { width: 36px; height: 36px; border-radius: 50%; border: 2px dashed #D6D0F7; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; background: conic-gradient(red,yellow,lime,aqua,blue,magenta,red); }
.edit-bg-custom span { font-size: 1rem; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.5); z-index: 1; pointer-events: none; }
.edit-bg-custom input[type="color"] { position: absolute; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* 링크 추가 버튼 그룹 */
.link-add-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 1.5rem; }
.link-add-btn { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 12px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; border: 1.5px solid #E5E7EB; background: #FFFFFF; color: #333; }
.link-add-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.link-add-btn__icon { font-size: 1.25rem; }
.link-add-btn--primary { border-color: #D6D0F7; background: #F9F7FF; color: #6C5CE7; }
.link-add-btn--primary:hover { border-color: #6C5CE7; }
.link-add-btn--product { border-color: #FFE0E0; background: #FFF8F8; color: #E74C3C; }
.link-add-btn--product:hover { border-color: #E74C3C; }
.link-add-btn--affiliate { border-color: #D0F0E8; background: #F0FFF8; color: #00B894; }
.link-add-btn--affiliate:hover { border-color: #00B894; }
.link-add-btn--schedule { border-color: #D0E8FF; background: #F0F8FF; color: #0984E3; }
.link-add-btn--schedule:hover { border-color: #0984E3; }

/* 유형별 입력 폼 */
.link-type-form { background: #FFFFFF; border: 1.5px solid #E5E7EB; border-radius: 14px; padding: 16px; margin-bottom: 1.5rem; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.link-type-form__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.link-type-form__header h3 { font-size: 1rem; font-weight: 700; color: #1A1A2E; margin: 0; }
.link-type-form__close { background: none; font-size: 1.2rem; color: #999; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.link-type-form__close:hover { background: #F3F4F6; color: #333; }

/* ---- Shop Feature Cards ---- */
.shop-feature-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 2rem; }

.shop-feature-card {
  background: #FFFFFF;
  border: 1.5px solid #E5E7EB;
  border-radius: 16px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.2s ease;
}

.shop-feature-card:hover {
  border-color: #6C5CE7;
  box-shadow: 0 4px 16px rgba(108, 92, 231, 0.08);
  transform: translateY(-2px);
}

.shop-feature-card__icon { font-size: 2rem; }
.shop-feature-card h3 { font-size: 1rem; font-weight: 700; color: #1A1A2E; margin: 0; }
.shop-feature-card p { font-size: 0.8rem; color: #888; line-height: 1.5; margin: 0; flex: 1; }

.shop-feature-card__btn {
  margin-top: 12px;
  padding: 10px 0;
  background: #F3F0FF;
  color: #6C5CE7;
  border: 1.5px solid #D6D0F7;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.shop-feature-card__btn:hover {
  background: #6C5CE7;
  color: #FFFFFF;
  border-color: #6C5CE7;
}

.shop-coming-soon {
  text-align: center;
  padding: 24px;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 14px;
}

.shop-coming-soon p { font-size: 0.95rem; font-weight: 600; color: #1A1A2E; margin: 0 0 6px; }
.shop-coming-soon span { font-size: 0.8rem; color: #999; }

@media (max-width: 600px) {
  .shop-feature-cards { grid-template-columns: 1fr; }
}

/* 블록 추가 바 */
.block-add-bar {
  width: 100%; padding: 14px; background: #F9FAFB; color: #6C5CE7;
  border: 2px dashed #D6D0F7; border-radius: 14px; font-size: 0.95rem; font-weight: 700;
  cursor: pointer; transition: all 0.2s ease; margin-bottom: 1rem;
}
.block-add-bar:hover { background: #F3F0FF; border-color: #6C5CE7; }

/* 블록 추가 패널 */
.block-section-label { font-size: 0.8rem; font-weight: 600; color: #999; margin: 1.25rem 0 0.75rem; }
.block-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.block-item {
  display: flex; align-items: center; gap: 10px; padding: 12px 10px;
  background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 12px;
  cursor: pointer; transition: all 0.15s ease; text-align: left;
}
.block-item:hover { border-color: #6C5CE7; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.04); }
.block-item__icon {
  width: 40px; height: 40px; border-radius: 10px; display: flex;
  align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0;
}
.block-item strong { font-size: 0.8rem; color: #1A1A2E; display: block; }
.block-item small { font-size: 0.65rem; color: #999; display: block; margin-top: 2px; }

@media (max-width: 768px) { .block-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .block-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .block-item { padding: 10px 8px; } }

/* 구독 플랜 */
.subscribe-plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.subscribe-plan {
  background: #FFFFFF; border: 2px solid #E5E7EB; border-radius: 16px; padding: 24px 20px;
  display: flex; flex-direction: column; transition: all 0.2s ease; position: relative;
}
.subscribe-plan:hover { border-color: #6C5CE7; transform: translateY(-2px); }
.subscribe-plan--highlight { border-color: #6C5CE7; box-shadow: 0 4px 20px rgba(108,92,231,0.15); }
.subscribe-plan--current { background: #F9F7FF; }
.subscribe-plan__header h3 { font-size: 1.1rem; font-weight: 700; color: #1A1A2E; margin: 0 0 8px; }
.subscribe-plan__price { font-size: 1.5rem; font-weight: 800; color: #6C5CE7; margin-bottom: 4px; }
.subscribe-plan__price small { font-size: 0.8rem; font-weight: 500; color: #999; }
.subscribe-plan__features { list-style: none; padding: 0; margin: 16px 0; flex: 1; }
.subscribe-plan__features li { padding: 6px 0; font-size: 0.8rem; color: #555; border-bottom: 1px solid #F3F4F6; }
.subscribe-plan__features li::before { content: '✓ '; color: #00B894; font-weight: 700; }
.subscribe-plan__btn {
  width: 100%; padding: 12px; background: #6C5CE7; color: #fff; border-radius: 10px;
  font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: all 0.15s ease; border: none;
}
.subscribe-plan__btn:hover { background: #5A4BD1; }
.subscribe-plan__badge {
  position: absolute; top: 12px; right: 12px; padding: 4px 10px; background: #00B894;
  color: #fff; border-radius: 6px; font-size: 0.7rem; font-weight: 700;
}
@media (max-width: 600px) { .subscribe-plans { grid-template-columns: 1fr; } }

.edit-btn-row { display: flex; gap: 10px; }

.edit-btn-save-supa {
  flex: 1; padding: 14px; background: #6C5CE7; color: #fff;
  border-radius: 12px; font-size: 0.9rem; font-weight: 700;
  transition: all 0.2s ease; box-shadow: 0 4px 15px rgba(108,92,231,0.3);
}
.edit-btn-save-supa:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(108,92,231,0.4); }
.edit-btn-save-supa:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.edit-btn-publish { flex: 1; padding: 14px; background: linear-gradient(135deg, #00B894, #00CEC9); color: #fff; border-radius: 12px; font-size: 0.9rem; font-weight: 700; box-shadow: 0 4px 15px rgba(0,184,148,0.4); transition: all 0.2s ease; }
.edit-btn-publish:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(0,184,148,0.5); }

.edit-publish-info {
  margin-top: 1rem; padding: 16px; background: #F9FAFB; border: 1px solid #E5E7EB;
  border-radius: 14px; text-align: center;
}
.edit-publish-url {
  font-size: 0.95rem; font-weight: 600; color: #6C5CE7; margin: 0 0 12px;
}
.edit-publish-actions { display: flex; gap: 8px; justify-content: center; }
.edit-publish-action-btn {
  padding: 10px 18px; background: #FFFFFF; border: 1.5px solid #E5E7EB;
  border-radius: 10px; font-size: 0.85rem; font-weight: 600; color: #555;
  cursor: pointer; transition: all 0.15s ease;
}
.edit-publish-action-btn:hover { border-color: #6C5CE7; color: #6C5CE7; }

/* 하단 4버튼 */
.edit-bottom-buttons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.edit-bottom-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 4px; background: #FFFFFF; border: 1.5px solid #E5E7EB; border-radius: 12px;
  font-size: 0.75rem; font-weight: 600; color: #555; cursor: pointer; transition: all 0.15s ease;
}
.edit-bottom-btn span:first-child { font-size: 1.2rem; }
.edit-bottom-btn:hover { border-color: #6C5CE7; color: #6C5CE7; background: #F9F7FF; }
@media (max-width: 360px) { .edit-bottom-buttons { grid-template-columns: repeat(2, 1fr); } }

/* SNS 공유 패널 */
.share-panel {
  margin-top: 12px; padding: 16px; background: #FFFFFF;
  border: 1.5px solid #E5E7EB; border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  animation: fadeInUp 0.2s ease-out;
}
.share-panel__header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid #F3F4F6;
}
.share-panel__icons {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.share-icon {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 4px; border-radius: 14px; cursor: pointer;
  text-decoration: none; transition: all 0.15s ease;
}
.share-icon:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.share-icon small { font-size: 0.65rem; font-weight: 600; color: #333; }
@media (max-width: 360px) { .share-panel__icons { grid-template-columns: repeat(4, 1fr); gap: 8px; } }

/* 발행 완료 결과 */
.edit-publish-result {
  margin-top: 1rem; padding: 24px; background: #F0FFF8; border: 1.5px solid #00B894;
  border-radius: 16px; text-align: center; animation: fadeInUp 0.4s ease-out;
}
.edit-publish-result__check {
  width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #00B894, #00CEC9);
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 800;
  color: #fff; margin: 0 auto 12px; box-shadow: 0 4px 12px rgba(0,184,148,0.3);
}
.edit-publish-result__title { font-size: 1.1rem; font-weight: 700; color: #1A1A2E; margin: 0 0 12px; }
.edit-publish-result__url-box {
  background: #FFFFFF; border: 1px solid #D0F0E8; border-radius: 10px; padding: 10px 16px; margin-bottom: 16px;
}
.edit-publish-result__url { font-size: 0.9rem; font-weight: 600; color: #6C5CE7; word-break: break-all; }
.edit-publish-result__actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

@keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  .manager-dashboard {
    flex-direction: column;
  }

  .manager-dashboard__sidebar {
    position: fixed;
    left: -280px;
    width: 280px;
    height: 100vh;
    transition: left 0.3s ease;
  }

  .manager-dashboard__sidebar--open {
    left: 0;
  }

  .manager-dashboard__main {
    margin-left: 0;
    padding: 1.5rem 1rem;
  }

  .manager-dashboard__content {
    max-width: 100%;
  }

  .manager-dashboard__topbar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #fff;
    border-bottom: 1px solid #E5E7EB;
    margin: -1.5rem -1rem 1rem;
    position: sticky;
    top: 0;
    z-index: 90;
  }
  .manager-dashboard__menu-btn {
    width: 36px; height: 36px; border-radius: 8px; border: 1px solid #E5E7EB;
    background: #fff; font-size: 1.2rem; cursor: pointer; display: flex;
    align-items: center; justify-content: center;
  }
  .manager-dashboard__topbar-logo {
    font-size: 0.9rem; font-weight: 800; color: #6C5CE7;
  }
  .manager-dashboard__topbar-logout {
    padding: 6px 14px; border-radius: 8px; border: 1px solid #E5E7EB;
    background: #fff; font-size: 0.75rem; font-weight: 600; color: #FF7675;
    cursor: pointer;
  }
  .manager-dashboard__overlay {
    display: block !important;
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.3); z-index: 99;
  }
  .manager-dashboard__sidebar { z-index: 100; }

  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
  }

  .stat-card {
    padding: 1rem;
  }

  .stat-card__value {
    font-size: 1.25rem;
  }

  .theme-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.75rem;
  }

  .link-row {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .link-row__info {
    flex: 0 0 100%;
  }

  .link-row__type {
    flex: 0 0 auto;
  }

  .link-row__toggle {
    flex: 0 0 auto;
  }

  .link-row__actions {
    flex: 0 0 100%;
    justify-content: flex-end;
  }

  .manager-login__card {
    max-width: 100%;
    padding: 2rem 1.5rem;
  }

  .modal__content {
    width: 90%;
    max-width: 100%;
    margin: 1rem;
  }

  .bar-chart {
    gap: 0.25rem;
  }
}

@media (max-width: 480px) {
  .manager-dashboard__sidebar {
    width: 240px;
    left: -240px;
  }

  .manager-login__card {
    border-radius: 12px;
    padding: 1.5rem 1rem;
  }

  .manager-login__logo {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .manager-login__form {
    gap: 1rem;
  }

  .form-group__label {
    font-size: 0.9rem;
  }

  .form-group__input {
    font-size: 1rem;
    padding: 0.75rem;
  }

  .modal__content {
    width: 95%;
    padding: 1.5rem 1rem;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .theme-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bar-chart {
    height: 150px;
  }

  .manager-panel__title {
    font-size: 1.25rem;
  }
}

/* ============================================
   명함 모달 (Manager)
   ============================================ */
.namecard-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.namecard-modal { background: #fff; border-radius: 20px; width: 100%; max-width: 380px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.2); animation: fadeInUp 0.3s ease; }
.namecard-tabs { display: flex; border-bottom: 1px solid #E5E7EB; position: relative; }
.namecard-tab { flex: 1; padding: 14px; background: none; border: none; font-size: 0.85rem; font-weight: 600; color: #999; cursor: pointer; }
.namecard-tab.active { color: #6C5CE7; border-bottom: 2px solid #6C5CE7; }
.namecard-close { position: absolute; right: 12px; top: 12px; background: none; border: none; font-size: 1.1rem; color: #999; cursor: pointer; }
.namecard-paper { padding: 32px 24px; text-align: center; background: linear-gradient(135deg, #FAFAFA, #FFFFFF); min-height: 200px; }
.namecard-paper--profile { text-align: left; }
.namecard-paper__avatar { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; margin-bottom: 12px; display: block; }
.namecard-paper__name { font-size: 1.3rem; font-weight: 800; color: #1A1A2E; margin: 0 0 6px; }
.namecard-paper__bio { font-size: 0.85rem; color: #888; margin: 0 0 12px; line-height: 1.5; white-space: pre-wrap; }
.namecard-paper__divider { width: 40px; height: 2px; background: #6C5CE7; margin: 12px auto; }
.namecard-paper--profile .namecard-paper__divider { margin: 12px 0; }
.namecard-paper__url { font-size: 0.8rem; color: #6C5CE7; font-weight: 600; margin: 8px 0 0; }
.namecard-paper__link { font-size: 0.8rem; color: #333; padding: 6px 0; border-bottom: 1px solid #F3F4F6; }

/* 종이명함 비즈니스 카드 */
.namecard-biz { padding: 28px 24px; background: linear-gradient(135deg, #FEFEFE, #F8F9FA); min-height: 200px; position: relative; }
.namecard-biz::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #6C5CE7, #00CEC9); }
.namecard-biz__logo-center { text-align: center; margin-bottom: 16px; }
.namecard-biz__logo-img { width: 100px; height: 100px; object-fit: contain; border-radius: 14px; }
.namecard-biz__logo-side { width: 96px; height: 96px; object-fit: contain; border-radius: 14px; flex-shrink: 0; }
.namecard-biz__body { display: flex; align-items: flex-start; gap: 16px; }
.namecard-biz__info { flex: 1; }
.namecard-biz__company { font-size: 0.8rem; font-weight: 700; color: #6C5CE7; margin: 0 0 4px; letter-spacing: 1px; text-transform: uppercase; }
.namecard-biz__name { font-size: 1.25rem; font-weight: 800; color: #1A1A2E; margin: 0 0 2px; }
.namecard-biz__divider { width: 32px; height: 2px; background: #6C5CE7; margin: 10px 0; }
.namecard-biz__info[style*="center"] .namecard-biz__divider { margin: 10px auto; }
.namecard-biz__info[style*="right"] .namecard-biz__divider { margin-left: auto; }
.namecard-biz__details { display: flex; flex-direction: column; gap: 4px; }
.namecard-biz__details p { font-size: 0.78rem; color: #555; margin: 0; line-height: 1.6; }

.namecard-actions { display: flex; gap: 8px; padding: 16px; border-top: 1px solid #F3F4F6; }
.namecard-action-btn { flex: 1; padding: 12px; border-radius: 10px; font-size: 0.85rem; font-weight: 700; cursor: pointer; border: 1px solid #E5E7EB; background: #F9FAFB; color: #555; transition: all 0.15s ease; }
.namecard-action-btn:first-child { background: #6C5CE7; color: #fff; border-color: #6C5CE7; }
.namecard-action-btn:hover { opacity: 0.85; }

/* 모바일 콘텐츠 바 + 버튼 최적화 */
@media (max-width: 768px) {
  .edit-link-item { padding: 6px 8px; gap: 6px; }
  .edit-link-icon { width: 24px; height: 24px; font-size: 0.95rem; }
  .edit-link-icon-img { width: 24px; height: 24px; }
  .edit-link-title { font-size: 0.72rem; }
  .edit-link-url { font-size: 0.6rem; }
  .edit-action-btn { width: 24px; height: 24px; font-size: 0.7rem; }
  .edit-order-btn { width: 18px; height: 14px; font-size: 0.5rem; }
  .link-add-buttons { gap: 6px !important; }
  .link-add-btn { padding: 8px 4px !important; font-size: 0.7rem !important; }
  .link-add-btn__icon { font-size: 1rem !important; }
}

/* ===== Mobile Footer Navigation ===== */
.manager-footer-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: #fff;
  border-top: 1px solid #E5E7EB;
  z-index: 100;
  padding: 0 0.5rem;
  justify-content: space-around;
  align-items: center;
}

@media (max-width: 768px) {
  .manager-footer-nav {
    display: flex;
  }
  .manager-dashboard__sidebar {
    display: none;
  }
  .manager-dashboard__sidebar--open {
    display: flex;
  }
  .manager-dashboard__content {
    padding-bottom: 80px !important;
  }
}

.footer-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 12px;
  transition: all 0.2s;
  color: #999;
}

.footer-nav-btn--active {
  color: #6C5CE7;
  background: rgba(108, 92, 231, 0.07);
}

.footer-nav-icon { font-size: 1.3rem; }
.footer-nav-label { font-size: 0.65rem; font-weight: 600; }
/* ===== ADMIN PANEL - Light Theme ===== */

/* Login */
.admin-login-container {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: #FFFFFF; font-family: 'Noto Sans KR', sans-serif;
}
.admin-login-box {
  width: 100%; max-width: 400px; padding: 40px;
  background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.admin-login-logo { text-align: center; margin-bottom: 20px; }
.admin-login-logo h1 { font-size: 24px; font-weight: 800; color: #6C5CE7; letter-spacing: 2px; }

/* Panel Layout */
.admin-panel {
  display: flex; min-height: 100vh; background: #FFFFFF;
  font-family: 'Noto Sans KR', 'Inter', -apple-system, sans-serif;
}

/* Sidebar */
.admin-panel__sidebar {
  width: 260px; background: #F9FAFB; border-right: 1px solid #E5E7EB;
  display: flex; flex-direction: column; position: fixed; height: 100vh; left: 0; top: 0; z-index: 50;
}
.admin-panel__logo {
  padding: 1.5rem; border-bottom: 1px solid #E5E7EB;
  display: flex; align-items: center; gap: 10px;
  font-size: 1.25rem; font-weight: 800; color: #6C5CE7;
}
.admin-panel__badge {
  font-size: 0.65rem; font-weight: 700; padding: 3px 8px; border-radius: 6px;
  background: #FF7675; color: #fff; letter-spacing: 1px;
}
.admin-panel__nav { flex: 1; padding: 1rem 0.75rem; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.admin-panel__nav-item {
  padding: 12px 14px; border-radius: 10px; background: none; border: none;
  font-size: 0.9rem; font-weight: 500; color: #777; text-align: left; cursor: pointer;
  transition: all 0.15s ease;
}
.admin-panel__nav-item:hover { color: #333; background: #F3F0FF; }
.admin-panel__nav-item.active { color: #6C5CE7; background: #F3F0FF; font-weight: 600; }
.admin-panel__logout {
  margin: 1rem; padding: 12px; background: #FFF0F0; color: #FF7675;
  border: 1px solid #FFE0E0; border-radius: 10px; font-size: 0.9rem; font-weight: 600; cursor: pointer;
}
.admin-panel__logout:hover { background: #FFE0E0; }

/* Main Content */
.admin-panel__main { flex: 1; margin-left: 260px; padding: 2rem; overflow-y: auto; }
.admin-panel__title { font-size: 1.5rem; font-weight: 700; color: #1A1A2E; margin-bottom: 1.5rem; }
.admin-panel__subtitle { font-size: 1.1rem; font-weight: 600; color: #1A1A2E; margin: 1.5rem 0 1rem; }

/* Stat Grid */
.admin-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 1rem; }
.admin-stat-card {
  background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 14px; padding: 20px;
  text-align: center; transition: all 0.2s ease;
}
.admin-stat-card:hover { border-color: #6C5CE7; transform: translateY(-2px); }
.admin-stat-card__icon { font-size: 1.5rem; margin-bottom: 8px; }
.admin-stat-card__value { font-size: 1.75rem; font-weight: 700; color: #1A1A2E; }
.admin-stat-card__label { font-size: 0.8rem; color: #888; margin-top: 4px; }

/* Member List (Overview) */
.admin-member-list { display: flex; flex-direction: column; gap: 8px; }
.admin-member-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 12px;
}
.admin-member-row__avatar {
  width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #6C5CE7, #A29BFE);
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 1rem;
  overflow: hidden; flex-shrink: 0;
}
.admin-member-row__avatar img { width: 100%; height: 100%; object-fit: cover; }
.admin-member-row__info { flex: 1; min-width: 0; }
.admin-member-row__name { display: block; font-size: 0.9rem; font-weight: 600; color: #1A1A2E; }
.admin-member-row__sub { display: block; font-size: 0.75rem; color: #999; }
.admin-member-row__date { font-size: 0.8rem; color: #BBB; flex-shrink: 0; }

/* Member Table */
.admin-member-table-wrap { overflow-x: auto; }
.admin-member-table { width: 100%; border-collapse: collapse; }
.admin-member-table th {
  text-align: left; padding: 12px 14px; font-size: 0.8rem; font-weight: 600;
  color: #888; border-bottom: 2px solid #E5E7EB; white-space: nowrap;
}
.admin-member-table td { padding: 12px 14px; border-bottom: 1px solid #F3F4F6; vertical-align: middle; }
.admin-member-table tr:hover td { background: #F9FAFB; }

/* Action Buttons */
.admin-action-btn {
  padding: 6px 14px; border-radius: 8px; font-size: 0.78rem; font-weight: 600; cursor: pointer;
  border: 1px solid; transition: all 0.15s ease;
}
.admin-action-btn--edit { background: #F3F0FF; color: #6C5CE7; border-color: #D6D0F7; }
.admin-action-btn--edit:hover { background: #6C5CE7; color: #fff; }
.admin-action-btn--delete { background: #FFF0F0; color: #FF7675; border-color: #FFE0E0; }
.admin-action-btn--delete:hover { background: #FF7675; color: #fff; }

/* Modal */
.admin-modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.3); z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.admin-modal {
  background: #FFFFFF; border-radius: 16px; width: 100%; max-width: 480px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12); overflow: hidden;
}
.admin-modal__header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 24px; border-bottom: 1px solid #E5E7EB;
}
.admin-modal__header h3 { font-size: 1.1rem; font-weight: 700; color: #1A1A2E; margin: 0; }
.admin-modal__close {
  background: none; border: none; font-size: 1.2rem; color: #999; cursor: pointer;
  width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
}
.admin-modal__close:hover { background: #F3F4F6; color: #333; }
.admin-modal__body { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.admin-modal__field label {
  display: block; font-size: 0.8rem; font-weight: 600; color: #555; margin-bottom: 6px;
}
.admin-modal__field input,
.admin-modal__field textarea,
.admin-modal__field select {
  width: 100%; padding: 10px 14px; background: #F9FAFB; border: 1.5px solid #E5E7EB;
  border-radius: 10px; font-size: 0.9rem; color: #1A1A2E; outline: none; font-family: inherit;
}
.admin-modal__field input:focus,
.admin-modal__field textarea:focus,
.admin-modal__field select:focus { border-color: #6C5CE7; background: #fff; }
.admin-modal__field textarea { resize: vertical; min-height: 60px; }
.admin-modal__footer {
  display: flex; gap: 10px; padding: 16px 24px; border-top: 1px solid #E5E7EB;
}
.admin-modal__btn { flex: 1; padding: 12px; border-radius: 10px; font-size: 0.9rem; font-weight: 700; cursor: pointer; border: none; }
.admin-modal__btn--cancel { background: #F3F4F6; color: #888; }
.admin-modal__btn--cancel:hover { background: #E9ECF0; }
.admin-modal__btn--save { background: #6C5CE7; color: #fff; }
.admin-modal__btn--save:hover { background: #5A4BD1; }

/* Responsive */
@media (max-width: 768px) {
  .admin-panel__sidebar { width: 220px; }
  .admin-panel__main { margin-left: 220px; padding: 1.5rem 1rem; }
  .admin-stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .admin-panel { flex-direction: column; }
  .admin-panel__sidebar { position: relative; width: 100%; height: auto; flex-direction: row; flex-wrap: wrap; }
  .admin-panel__logo { border-bottom: none; border-right: none; }
  .admin-panel__nav { flex-direction: row; overflow-x: auto; padding: 8px; gap: 6px; }
  .admin-panel__nav-item { white-space: nowrap; padding: 8px 12px; font-size: 0.8rem; }
  .admin-panel__main { margin-left: 0; }
  .admin-panel__logout { margin: 0; padding: 8px 12px; border-radius: 8px; }
}

/* 에이전트 서브탭 */
.admin-agent__subtabs { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
.admin-agent__subtab { padding: 8px 16px; border-radius: 8px; border: 1px solid #E5E7EB; background: #F9FAFB; font-size: 0.8rem; font-weight: 600; color: #555; cursor: pointer; transition: all 0.2s; }
.admin-agent__subtab:hover { background: #F3F0FF; color: #6C5CE7; border-color: #6C5CE7; }
.admin-agent__subtab.active { background: #6C5CE7; color: #fff; border-color: #6C5CE7; }
/* ===========================
   BIBLE LANDING PAGE
   theme-color: #1E40AF (dark blue)
   =========================== */

.bible-page {
  --bible-primary: #1E40AF;
  --bible-primary-light: #3B82F6;
  --bible-primary-dark: #1E3A8A;
  --bible-accent: #F59E0B;
  --bible-bg: #FFFFFF;
  --bible-bg-alt: #F0F4FF;
  --bible-bg-dark: #0F172A;
  --bible-text: #1E293B;
  --bible-text-secondary: #64748B;
  --bible-text-muted: #94A3B8;
  --bible-border: #E2E8F0;
  --bible-radius: 16px;
  --bible-container: 1100px;
  width: 100%;
  overflow-x: hidden;
  background: var(--bible-bg);
  color: var(--bible-text);
  font-family: 'Noto Sans KR', 'Inter', -apple-system, sans-serif;
}

.bible-container {
  max-width: var(--bible-container);
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Navbar ── */
.bible-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: all 0.3s;
}
.bible-nav.scrolled {
  background: rgba(255,255,255,0.95);
  border-bottom-color: var(--bible-border);
  box-shadow: 0 2px 20px rgba(0,0,0,0.06);
}
.bible-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
}
.bible-nav-logo {
  font-size: 18px;
  font-weight: 800;
  color: var(--bible-primary);
  text-decoration: none;
}
.bible-nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
}
.bible-nav-links a {
  font-size: 14px;
  font-weight: 600;
  color: var(--bible-text-secondary);
  text-decoration: none;
  transition: color 0.2s;
}
.bible-nav-links a:hover { color: var(--bible-primary); }
.bible-nav-cta {
  background: var(--bible-primary) !important;
  color: #fff !important;
  padding: 8px 20px;
  border-radius: 10px;
  font-size: 13px !important;
}
.bible-nav-cta:hover { background: var(--bible-primary-dark) !important; }

/* ── Hero ── */
.bible-hero {
  padding: 60px 0 40px;
  background: linear-gradient(180deg, #F0F4FF 0%, #FFFFFF 100%);
}
.bible-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.bible-badge {
  display: inline-block;
  background: var(--bible-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.bible-hero-title {
  font-size: 42px;
  font-weight: 900;
  line-height: 1.25;
  color: var(--bible-text);
  margin: 0 0 16px;
}
.bible-highlight {
  color: var(--bible-primary);
}
.bible-hero-sub {
  font-size: 18px;
  color: var(--bible-text-secondary);
  margin: 0 0 6px;
}
.bible-hero-tag {
  font-size: 15px;
  font-weight: 700;
  color: var(--bible-accent);
  margin: 0 0 28px;
}
.bible-hero-cta-group { margin-bottom: 24px; }
.bible-btn-primary {
  display: inline-block;
  background: var(--bible-primary);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  padding: 14px 36px;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.2s;
  box-shadow: 0 4px 16px rgba(30,64,175,0.25);
}
.bible-btn-primary:hover {
  background: var(--bible-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(30,64,175,0.35);
}
.bible-btn-lg {
  font-size: 18px;
  padding: 18px 48px;
}
.bible-cta-hint {
  font-size: 12px;
  color: var(--bible-text-muted);
  margin-top: 10px;
}
.bible-social-proof {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.bible-counter {
  font-size: 14px;
  color: var(--bible-text-secondary);
}
.bible-counter strong { color: var(--bible-primary); }
.bible-rating {
  font-size: 13px;
  color: var(--bible-accent);
  font-weight: 600;
}

/* Phone mockup */
.bible-hero-phone {
  display: flex;
  justify-content: center;
}
.bible-phone-frame {
  width: 260px;
  height: 520px;
  background: #111;
  border-radius: 36px;
  padding: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.bible-phone-screen {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #0F172A 0%, #1E293B 100%);
  border-radius: 26px;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  color: #fff;
}
.bible-phone-header {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 20px;
}
.bible-phone-streak {
  font-size: 13px;
  color: var(--bible-accent);
}
.bible-phone-verse {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bible-phone-ref {
  font-size: 12px;
  color: var(--bible-text-muted);
  margin: 0 0 10px;
  font-weight: 600;
}
.bible-phone-text {
  font-size: 17px;
  line-height: 1.7;
  color: #E2E8F0;
  margin: 0;
  word-break: keep-all;
}
.bible-phone-controls {
  display: flex;
  justify-content: center;
  gap: 32px;
  font-size: 22px;
  margin: 20px 0 12px;
}
.bible-phone-play {
  width: 44px;
  height: 44px;
  background: var(--bible-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.bible-phone-progress {
  height: 3px;
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
  overflow: hidden;
}
.bible-phone-progress-bar {
  height: 100%;
  background: var(--bible-primary-light);
  border-radius: 2px;
  transition: width 0.3s;
}

/* ── Sections common ── */
.bible-section {
  padding: 72px 0;
}
.bible-section:nth-child(even) {
  background: var(--bible-bg-alt);
}
.bible-section-title {
  text-align: center;
  font-size: 28px;
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--bible-text);
}
.bible-section-sub {
  text-align: center;
  font-size: 15px;
  color: var(--bible-text-secondary);
  margin: 0 0 40px;
}

/* ── How It Works ── */
.bible-how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.bible-how-card {
  text-align: center;
  padding: 32px 20px;
  background: #fff;
  border-radius: var(--bible-radius);
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.bible-how-step {
  font-size: 11px;
  font-weight: 800;
  color: var(--bible-primary);
  letter-spacing: 1px;
  margin-bottom: 12px;
}
.bible-how-icon { font-size: 40px; margin-bottom: 12px; }
.bible-how-card h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 8px;
}
.bible-how-card p {
  font-size: 13px;
  color: var(--bible-text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* ── Features ── */
.bible-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.bible-feature-card {
  position: relative;
  padding: 28px 20px;
  background: #fff;
  border-radius: var(--bible-radius);
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: transform 0.2s, box-shadow 0.2s;
}
.bible-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.08);
}
.bible-feature-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 8px;
  letter-spacing: 0.5px;
}
.bible-feature-badge.core { background: var(--bible-primary); color: #fff; }
.bible-feature-badge.new { background: #10B981; color: #fff; }
.bible-feature-badge.premium { background: var(--bible-accent); color: #fff; }
.bible-feature-icon { font-size: 32px; margin-bottom: 12px; }
.bible-feature-card h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 6px;
}
.bible-feature-card p {
  font-size: 13px;
  color: var(--bible-text-secondary);
  line-height: 1.6;
  margin: 0;
}
.bible-features-cta {
  text-align: center;
  margin-top: 36px;
}

/* ── Quiz ── */
.bible-quiz-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.bible-quiz-card {
  text-align: center;
  padding: 28px 20px;
  background: #fff;
  border-radius: var(--bible-radius);
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.bible-quiz-icon { font-size: 36px; margin-bottom: 10px; }
.bible-quiz-card h3 { font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.bible-quiz-card p { font-size: 13px; color: var(--bible-text-secondary); margin: 0 0 12px; line-height: 1.5; }
.bible-quiz-meta {
  display: flex;
  justify-content: center;
  gap: 12px;
  font-size: 12px;
  color: var(--bible-text-muted);
  margin-bottom: 16px;
}
.bible-quiz-tier {
  background: #10B981;
  color: #fff;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 11px;
}
.bible-btn-outline {
  display: inline-block;
  padding: 10px 24px;
  border: 2px solid var(--bible-primary);
  color: var(--bible-primary);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s;
}
.bible-btn-outline:hover {
  background: var(--bible-primary);
  color: #fff;
}

/* ── Games ── */
.bible-games-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.bible-game-card {
  text-align: center;
  padding: 28px 20px;
  background: #fff;
  border-radius: var(--bible-radius);
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.bible-game-icon { font-size: 36px; margin-bottom: 10px; }
.bible-game-card h3 { font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.bible-game-card p { font-size: 13px; color: var(--bible-text-secondary); margin: 0 0 12px; line-height: 1.5; }
.bible-game-reward {
  display: inline-block;
  background: var(--bible-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 8px;
}

/* ── Testimonials ── */
.bible-testimonial-carousel {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  min-height: 220px;
}
.bible-testimonial-card {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transform: translateX(40px);
  transition: all 0.5s ease;
  pointer-events: none;
  text-align: center;
  padding: 32px 24px;
  background: #fff;
  border-radius: var(--bible-radius);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.bible-testimonial-card.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.bible-testimonial-avatar { font-size: 40px; margin-bottom: 12px; }
.bible-testimonial-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--bible-text);
  margin: 0 0 16px;
  word-break: keep-all;
}
.bible-testimonial-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bible-testimonial-info strong { font-size: 14px; }
.bible-testimonial-info span { font-size: 12px; color: var(--bible-text-muted); }
.bible-testimonial-dots {
  position: absolute;
  bottom: -36px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.bible-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--bible-border);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s;
}
.bible-dot.active { background: var(--bible-primary); width: 24px; border-radius: 4px; }

/* ── Pricing ── */
.bible-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
}
.bible-pricing-card {
  position: relative;
  padding: 32px 24px;
  background: #fff;
  border-radius: var(--bible-radius);
  border: 2px solid var(--bible-border);
  text-align: center;
  transition: transform 0.2s;
}
.bible-pricing-card:hover { transform: translateY(-4px); }
.bible-pricing-card.popular {
  border-color: var(--bible-primary);
  box-shadow: 0 8px 32px rgba(30,64,175,0.12);
}
.bible-popular-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bible-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 18px;
  border-radius: 20px;
}
.bible-pricing-card h3 {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--bible-text);
}
.bible-price { margin-bottom: 4px; }
.bible-price-amount {
  font-size: 36px;
  font-weight: 900;
  color: var(--bible-primary);
}
.bible-price-period {
  font-size: 14px;
  color: var(--bible-text-muted);
}
.bible-price-sub {
  font-size: 13px;
  color: var(--bible-text-secondary);
  margin: 0 0 20px;
}
.bible-price-features {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  text-align: left;
}
.bible-price-features li {
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px solid #F1F5F9;
  color: var(--bible-text);
}
.bible-price-limit {
  font-size: 11px;
  color: var(--bible-text-muted);
  margin: 0 0 16px;
}
.bible-price-cta {
  display: block;
  padding: 12px 24px;
  border: 2px solid var(--bible-primary);
  color: var(--bible-primary);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s;
}
.bible-price-cta:hover {
  background: var(--bible-primary);
  color: #fff;
}
.bible-price-cta.primary {
  background: var(--bible-primary);
  color: #fff;
  border-color: var(--bible-primary);
}
.bible-price-cta.primary:hover {
  background: var(--bible-primary-dark);
  border-color: var(--bible-primary-dark);
}

/* ── Final CTA ── */
.bible-final-cta {
  background: linear-gradient(135deg, var(--bible-primary) 0%, var(--bible-primary-dark) 100%) !important;
  text-align: center;
  color: #fff;
  padding: 80px 0;
}
.bible-final-cta h2 {
  font-size: 32px;
  font-weight: 900;
  margin: 0 0 10px;
  color: #fff;
}
.bible-final-cta p {
  font-size: 16px;
  opacity: 0.85;
  margin: 0 0 28px;
}
.bible-final-cta .bible-btn-primary {
  background: #fff;
  color: var(--bible-primary);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.bible-final-cta .bible-btn-primary:hover {
  background: #F0F4FF;
}

/* ── Footer ── */
.bible-footer {
  background: var(--bible-bg-dark);
  color: #94A3B8;
  padding: 40px 0 32px;
}
.bible-footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.bible-footer-logo {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}
.bible-footer-brand p {
  font-size: 12px;
  margin: 6px 0 0;
}
.bible-footer-links {
  display: flex;
  gap: 20px;
}
.bible-footer-links a {
  font-size: 13px;
  color: #94A3B8;
  text-decoration: none;
  transition: color 0.2s;
}
.bible-footer-links a:hover { color: #fff; }
.bible-footer-social {
  display: flex;
  gap: 16px;
  font-size: 20px;
}
.bible-footer-social a {
  text-decoration: none;
  transition: transform 0.2s;
}
.bible-footer-social a:hover { transform: scale(1.15); }
.bible-footer-hublink a {
  font-size: 12px;
  color: #64748B;
  text-decoration: none;
  font-weight: 600;
}
.bible-footer-hublink a:hover { color: #94A3B8; }

/* ===========================
   MOBILE RESPONSIVE
   =========================== */

@media (max-width: 768px) {
  /* Nav */
  .bible-nav-links a:not(.bible-nav-cta) { display: none; }

  /* Hero */
  .bible-hero { padding: 32px 0 24px; }
  .bible-hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .bible-hero-text { order: 1; }
  .bible-hero-phone { order: 2; }
  .bible-hero-title { font-size: 28px; }
  .bible-hero-sub { font-size: 15px; }
  .bible-hero-tag { font-size: 13px; margin-bottom: 20px; }
  .bible-social-proof { justify-content: center; }

  .bible-phone-frame {
    width: 220px;
    height: 440px;
    border-radius: 30px;
    padding: 10px;
  }
  .bible-phone-screen {
    border-radius: 22px;
    padding: 20px 14px;
  }
  .bible-phone-text { font-size: 14px; }

  /* Sections */
  .bible-section { padding: 48px 0; }
  .bible-section-title { font-size: 22px; }
  .bible-section-sub { font-size: 13px; margin-bottom: 28px; }

  /* Grids → 1 col */
  .bible-how-grid,
  .bible-features-grid,
  .bible-quiz-grid,
  .bible-games-grid {
    grid-template-columns: 1fr;
  }

  .bible-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Pricing - Premium first */
  .bible-pricing-grid {
    grid-template-columns: 1fr;
  }
  .bible-pricing-card.popular { order: -1; }

  /* Final CTA */
  .bible-final-cta h2 { font-size: 24px; }
  .bible-final-cta p { font-size: 14px; }
  .bible-btn-lg { font-size: 16px; padding: 14px 36px; }
}

@media (max-width: 480px) {
  .bible-features-grid {
    grid-template-columns: 1fr;
  }
  .bible-hero-title { font-size: 24px; }
  .bible-phone-frame {
    width: 200px;
    height: 400px;
  }
}
/* ── BibleHome — 성경읽기 메인 화면 ── */
.bible-home {
  min-height: 100vh;
  background: #f8fafc;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: #1e293b;
  padding-bottom: 80px;
  max-width: 520px;
  margin: 0 auto;
}

/* ── Header ── */
.bh-header {
  text-align: center;
  padding: 24px 20px 16px;
  position: relative;
}
.bh-header h1 {
  font-size: 22px;
  font-weight: 800;
  color: #1e293b;
  margin: 0;
}
.bh-header .bh-slogan {
  font-size: 13px;
  color: #94a3b8;
  margin-top: 4px;
}
.bh-header .bh-slogan .no { color: #ef4444; font-weight: 700; }
.bh-header .bh-slogan .yes { color: #3b82f6; font-weight: 700; }
.bh-menu-btn {
  position: absolute;
  right: 16px;
  top: 24px;
  background: none;
  border: none;
  font-size: 22px;
  color: #64748b;
  cursor: pointer;
  padding: 6px;
}

/* ── 공통 섹션 ── */
.bh-section {
  padding: 0 16px;
  margin-bottom: 20px;
}
.bh-section-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 4px;
}
.bh-section-sub {
  font-size: 13px;
  color: #94a3b8;
  margin-bottom: 12px;
}

/* ── 시간 버튼 그리드 ── */
.bh-time-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}
.bh-time-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s;
  padding: 8px 4px;
}
.bh-time-btn:active { transform: scale(0.96); }
.bh-time-btn:hover { background: #f1f5f9; }
.bh-time-btn.highlight {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.08);
  color: #3b82f6;
}
.bh-time-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* ── 책으로 일독 ── */
.bh-progress-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.bh-progress-tab {
  flex: 1;
  padding: 10px 0;
  border-radius: 20px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
}
.bh-progress-tab.active {
  background: #334155;
  color: #fff;
}
.bh-progress-tab:not(.active) {
  background: #f1f5f9;
  color: #64748b;
}
.bh-testament-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.bh-testament-card {
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: #f1f5f9;
  padding: 14px;
}
.bh-testament-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.bh-testament-header h3 {
  font-size: 16px;
  font-weight: 800;
  margin: 0;
}
.bh-testament-header span {
  font-size: 13px;
  color: #94a3b8;
}
.bh-resume-btn {
  border: 1px solid #cbd5e1;
  background: #fff;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: #334155;
}
.bh-resume-btn:hover { background: #f8fafc; }
.bh-category-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
}
.bh-category-name {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
}
.bh-category-name .arrow {
  font-size: 10px;
  color: #94a3b8;
}
.bh-category-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bh-category-pct {
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  min-width: 28px;
  text-align: right;
}

/* ── 함께읽기 버튼 ── */
.bh-together-row {
  display: flex;
  gap: 8px;
}
.bh-together-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 0;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s;
}
.bh-together-btn:hover { background: #f1f5f9; }
.bh-together-btn:active { transform: scale(0.97); }
.bh-together-icon {
  font-size: 16px;
}

/* ── 게으른자의 묵상 ── */
.bh-meditation {
  margin: 0 16px 20px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: #fff;
  padding: 20px;
  text-align: center;
}
.bh-meditation h2 {
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 4px;
}
.bh-meditation .bh-med-sub {
  font-size: 13px;
  color: #94a3b8;
  margin-bottom: 16px;
}
.bh-verse-card {
  background: #f8fafc;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
.bh-verse-label {
  font-size: 14px;
  font-weight: 700;
  color: #3b82f6;
  margin-bottom: 8px;
}
.bh-verse-text {
  font-size: 14px;
  line-height: 1.7;
  color: #334155;
  margin-bottom: 6px;
}
.bh-verse-ref {
  font-size: 12px;
  color: #94a3b8;
}
.bh-med-cta {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  border: 2px solid #3b82f6;
  background: rgba(59,130,246,0.04);
  font-size: 16px;
  font-weight: 700;
  color: #3b82f6;
  cursor: pointer;
  margin-bottom: 12px;
  transition: all 0.15s;
}
.bh-med-cta:hover { background: rgba(59,130,246,0.1); }
.bh-med-cta:active { transform: scale(0.98); }
.bh-note-row {
  display: flex;
  gap: 8px;
}
.bh-note-btn {
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
}
.bh-note-btn:hover { background: #f8fafc; }

/* ── 하단 탭 바 ── */
.bh-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 520px;
  display: flex;
  background: #fff;
  border-top: 1px solid #e2e8f0;
  z-index: 100;
}
.bh-nav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 0 8px;
  border: none;
  background: none;
  cursor: pointer;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
  transition: color 0.15s;
  text-decoration: none;
}
.bh-nav-tab.active { color: #3b82f6; }
.bh-nav-tab .bh-nav-icon {
  font-size: 20px;
  margin-bottom: 2px;
}

/* ── 알림 토스트 ── */
.bh-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #334155;
  color: #fff;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  z-index: 200;
  animation: bh-fadeInOut 2.5s ease;
  pointer-events: none;
}
@keyframes bh-fadeInOut {
  0% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  15% { opacity: 1; transform: translateX(-50%) translateY(0); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}
/* ============================================================
   EL MUSIC RESONANCE — 9섹션 단일 파일 스타일
   다크 테마 + 네온 파동 + Resonance 그라디언트
   ============================================================ */

.elmusic-root {
  --el-bg:        #0A0A1A;
  --el-bg-2:      #12122A;
  --el-bg-3:      #1A1A3A;
  --el-primary:   #00E5FF;
  --el-primary-2: #00B8D4;
  --el-accent:    #7B61FF;
  --el-text:      #FFFFFF;
  --el-text-mut:  rgba(255,255,255,0.65);
  --el-text-dim:  rgba(255,255,255,0.40);
  --el-border:    rgba(255,255,255,0.08);
  --el-glow:      0 0 40px rgba(0,229,255,0.35);
  --el-glow-lg:   0 0 80px rgba(0,229,255,0.25);
  --el-radius:    20px;
  --el-resonance: linear-gradient(135deg, #00E5FF 0%, #7B61FF 50%, #FF006E 100%);
  --el-problem:   #6B7280;
  --el-problem-2: #374151;
  --el-neutral:   rgba(255,255,255,0.04);
  --el-success:   #10B981;
  --el-real:      #FBBF24;

  min-height: 100vh;
  background: var(--el-bg);
  color: var(--el-text);
  font-family: 'Inter', 'Noto Sans KR', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.elmusic-root * { box-sizing: border-box; }

/* 공통 섹션 */
.el-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 24px;
}
.el-section__head { text-align: center; margin-bottom: 48px; }
.el-h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 800;
  margin: 0 0 12px;
  background: var(--el-resonance);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.el-section__sub { color: var(--el-text-mut); font-size: 1.05rem; margin: 0; }

/* 버튼 */
.el-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 12px;
  border: none;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.25s, filter 0.2s;
}
.el-btn--resonance {
  background: var(--el-resonance);
  color: #fff;
  box-shadow: var(--el-glow);
}
.el-btn--resonance:hover {
  transform: translateY(-2px);
  box-shadow: var(--el-glow-lg);
  filter: brightness(1.08);
}
.el-btn--ghost {
  background: transparent;
  color: var(--el-primary);
  border: 1.5px solid var(--el-primary);
}
.el-btn--ghost:hover { background: rgba(0,229,255,0.1); transform: translateY(-1px); }

/* ============ HERO ============ */
.el-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 80px 24px;
}
.el-hero__waves {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.el-wave {
  position: absolute;
  width: 400px;
  height: 400px;
  border: 2px solid var(--el-primary);
  border-radius: 50%;
  opacity: 0;
  animation: elPulse 4s ease-out infinite;
}
.el-wave:nth-child(2) { animation-delay: 1s; }
.el-wave:nth-child(3) { animation-delay: 2s; }
.el-wave:nth-child(4) { animation-delay: 3s; }
@keyframes elPulse {
  0%   { transform: scale(0.4); opacity: 0.7; }
  70%  { opacity: 0.2; }
  100% { transform: scale(2.5); opacity: 0; }
}
.el-hero__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 860px;
}
.el-hero__brand {
  display: inline-block;
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  color: var(--el-primary);
  text-decoration: none;
  margin-bottom: 32px;
  font-weight: 700;
}
.el-hero__headline {
  font-size: clamp(2.6rem, 7vw, 5rem);
  font-weight: 900;
  line-height: 1.05;
  margin: 0 0 20px;
  letter-spacing: -0.02em;
  text-shadow: 0 0 60px rgba(0,229,255,0.4);
}
.el-hero__sub {
  font-size: 1.15rem;
  color: var(--el-text-mut);
  margin: 0 0 40px;
}
.el-hero__cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============ PROBLEM ============ */
.el-problem {
  max-width: none;
  padding: 0;
}
.el-problem__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 90vh;
}
.el-problem__side {
  padding: 80px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
}
.el-problem__dead {
  background: var(--el-problem-2);
  color: var(--el-problem);
  filter: grayscale(0.4);
}
.el-h1-dead {
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 400;
  margin: 0;
  color: var(--el-problem);
}
.el-problem__dead p { color: rgba(255,255,255,0.3); margin: 0; }
.el-wave-static { width: 240px; height: 60px; color: rgba(255,255,255,0.2); }

.el-problem__alive {
  background: var(--el-bg);
  color: var(--el-primary);
  position: relative;
}
.el-h1-alive {
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  font-weight: 800;
  margin: 0;
  color: var(--el-primary);
  letter-spacing: -0.02em;
  text-shadow: var(--el-glow-lg);
  line-height: 1.1;
}
.el-problem__alive p { color: var(--el-text-mut); margin: 0; }
.el-wave-alive { width: 280px; height: 60px; color: var(--el-primary); filter: drop-shadow(0 0 10px currentColor); }

/* ============ SOLUTION ============ */
.el-solution__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 32px;
  align-items: center;
  margin-bottom: 48px;
}
.el-solution__col {
  background: var(--el-bg-2);
  border: 1px solid var(--el-border);
  border-radius: var(--el-radius);
  padding: 28px;
}
.el-solution__col h3 {
  font-size: 1.1rem;
  margin: 0 0 18px;
  color: var(--el-primary);
}
.el-solution__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.el-solution__col li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--el-text-mut);
  font-size: 0.95rem;
}

.el-solution__engine {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
}
.el-engine-ring {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: var(--el-resonance);
  background-size: 200% 200%;
  animation: elRotate 8s linear infinite;
  padding: 4px;
  box-shadow: 0 0 60px rgba(123,97,255,0.5);
}
@keyframes elRotate {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.el-engine-ring__inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--el-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.el-engine-ring__label {
  text-align: center;
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--el-primary);
  line-height: 1.2;
}

.el-minidemo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 18px 24px;
  background: var(--el-bg-2);
  border: 1px solid var(--el-border);
  border-radius: 14px;
  color: var(--el-text-mut);
  font-size: 0.9rem;
  margin-bottom: 56px;
}
.el-minidemo__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--el-primary);
  box-shadow: 0 0 12px var(--el-primary);
  animation: elBlink 1.4s ease-in-out infinite;
}
@keyframes elBlink { 50% { opacity: 0.3; } }
.el-minidemo__arrow { color: var(--el-primary); font-weight: 700; }

/* Compare grid */
.el-compare { margin-top: 48px; }
.el-compare__title {
  text-align: center;
  font-size: 1.25rem;
  margin: 0 0 18px;
  color: #fff;
}
.el-compare__wrap {
  border-radius: var(--el-radius);
  border: 1px solid var(--el-border);
  background: var(--el-neutral);
  overflow: hidden;
}
.el-compare__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  table-layout: fixed;
}
.el-compare__table th,
.el-compare__table td {
  padding: 12px 8px;
  text-align: center;
  border-bottom: 1px solid var(--el-border);
}
.el-compare__table th {
  background: rgba(0,0,0,0.3);
  color: var(--el-text-mut);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.el-compare__table th:first-child { width: 45%; }
.el-compare__table th:not(:first-child) { width: 18.33%; }
.el-compare__feature {
  text-align: left !important;
  color: var(--el-text);
  font-weight: 600;
  font-size: 0.82rem;
  padding-left: 14px !important;
}
.el-compare__table td svg { color: var(--el-success); }
.el-compare__x { color: var(--el-text-dim) !important; }
.el-compare__us {
  background: linear-gradient(180deg, rgba(0,229,255,0.12), rgba(123,97,255,0.08));
  color: var(--el-primary) !important;
}
.el-compare__us svg { color: var(--el-primary) !important; }
.el-compare__caption {
  text-align: center;
  color: var(--el-text-mut);
  font-style: italic;
  margin: 20px 0 0;
  font-size: 0.88rem;
  line-height: 1.5;
  padding: 0 8px;
}

/* ============ CORE FEATURES ============ */
.el-features__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
.el-feature {
  position: relative;
  padding: 28px 24px;
  background: var(--el-bg-2);
  border: 1px solid var(--el-border);
  border-radius: var(--el-radius);
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.el-feature:hover {
  transform: translateY(-3px);
  border-color: var(--el-primary);
  box-shadow: var(--el-glow);
}
.el-feature--hi {
  background: linear-gradient(180deg, rgba(123,97,255,0.15), rgba(0,229,255,0.05));
  border-color: var(--el-accent);
}
.el-feature__badge {
  position: absolute;
  top: 14px; right: 14px;
  padding: 3px 8px;
  background: var(--el-resonance);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  border-radius: 20px;
}
.el-feature__icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: rgba(0,229,255,0.08);
  color: var(--el-primary);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.el-feature h3 { font-size: 1.2rem; margin: 0 0 4px; color: #fff; }
.el-feature__sub { color: var(--el-primary); font-size: 0.82rem; font-weight: 600; margin: 0 0 10px; }
.el-feature__desc { color: var(--el-text-mut); font-size: 0.88rem; line-height: 1.55; margin: 0; }

/* ============ AUTOMATION ============ */
.el-auto__pipeline {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 48px;
}
.el-auto__step {
  display: flex;
  align-items: center;
  gap: 10px;
}
.el-auto__num {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--el-bg-2);
  border: 2px solid var(--el-primary);
  color: var(--el-primary);
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.el-auto__label { color: #fff; font-weight: 600; font-size: 0.92rem; white-space: nowrap; }
.el-auto__arrow { color: var(--el-primary); font-weight: 700; }

.el-auto__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}
.el-stat {
  background: var(--el-bg-2);
  border: 1px solid var(--el-border);
  border-radius: var(--el-radius);
  padding: 24px;
  text-align: center;
}
.el-stat strong {
  display: block;
  font-size: 2.2rem;
  color: var(--el-primary);
  font-weight: 900;
  margin-bottom: 6px;
}
.el-stat span { color: var(--el-text-mut); font-size: 0.88rem; }
.el-auto__platforms {
  text-align: center;
  color: var(--el-text-mut);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 16px;
  background: var(--el-bg-2);
  border-radius: 14px;
}

/* ============ EXPERIENCE ============ */
.el-exp__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.el-exp__card {
  position: relative;
  padding: 32px 26px;
  border-radius: var(--el-radius);
  color: #fff;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s;
}
.el-exp__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.el-exp__tag {
  align-self: flex-start;
  padding: 4px 10px;
  background: rgba(255,255,255,0.15);
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  backdrop-filter: blur(6px);
}
.el-exp__card h3 { font-size: 1.4rem; margin: 0; font-weight: 800; }
.el-exp__card p { color: rgba(255,255,255,0.8); margin: 0; font-size: 0.9rem; line-height: 1.5; }

/* ============ TOGETHER ECONOMY ============ */
.el-together__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}
.el-together__step {
  padding: 28px 24px;
  background: var(--el-bg-2);
  border: 1px solid var(--el-border);
  border-radius: var(--el-radius);
  position: relative;
  transition: transform 0.25s, border-color 0.25s;
}
.el-together__step:hover {
  transform: translateY(-3px);
  border-color: var(--el-accent);
}
.el-together__num {
  position: absolute;
  top: 18px; right: 22px;
  font-size: 0.75rem;
  color: var(--el-text-dim);
  font-weight: 700;
}
.el-together__step svg { color: var(--el-accent); margin-bottom: 14px; }
.el-together__step h3 { font-size: 1.15rem; margin: 0 0 6px; color: #fff; }
.el-together__step p { color: var(--el-text-mut); margin: 0; font-size: 0.85rem; line-height: 1.55; }

.el-together__notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 20px;
  background: rgba(255,255,255,0.04);
  border: 1px dashed var(--el-border);
  border-radius: 14px;
  color: var(--el-text-mut);
  font-size: 0.88rem;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.el-together__divide { color: var(--el-text-dim); }
.el-together .el-btn { display: block; margin: 0 auto; }

/* ============ REAL WORLD ============ */
.el-real__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.el-real__card {
  position: relative;
  padding: 32px 26px;
  background: linear-gradient(135deg, rgba(251,191,36,0.12), rgba(249,115,22,0.06));
  border: 1px solid rgba(251,191,36,0.25);
  border-radius: var(--el-radius);
  min-height: 200px;
  transition: transform 0.25s, border-color 0.25s;
}
.el-real__card:hover {
  transform: translateY(-3px);
  border-color: var(--el-real);
}
.el-real__badge {
  display: inline-block;
  padding: 4px 10px;
  background: var(--el-real);
  color: #0F172A;
  font-size: 0.7rem;
  font-weight: 800;
  border-radius: 20px;
  margin-bottom: 14px;
}
.el-real__card h3 { font-size: 1.3rem; margin: 0 0 4px; color: #fff; }
.el-real__sub { color: var(--el-real); font-size: 0.82rem; font-weight: 600; margin: 0 0 10px; }
.el-real__desc { color: var(--el-text-mut); font-size: 0.88rem; line-height: 1.55; margin: 0; }
.el-real__caption {
  text-align: center;
  color: var(--el-text-mut);
  font-style: italic;
  margin: 32px 0 0;
  font-size: 0.9rem;
}

/* ============ FINAL CTA ============ */
.el-final {
  max-width: none;
  padding: 0;
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.el-final__bg {
  position: absolute;
  inset: 0;
  background: var(--el-resonance);
  background-size: 200% 200%;
  animation: elRotate 12s linear infinite;
  opacity: 0.22;
  pointer-events: none;
}
.el-final__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 80px 24px;
  max-width: 640px;
}
.el-final__h1 {
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  font-weight: 900;
  margin: 0 0 18px;
  letter-spacing: -0.02em;
  background: var(--el-resonance);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.el-final__sub {
  color: var(--el-text-mut);
  font-size: 1.05rem;
  margin: 0 0 36px;
}
.el-final__form {
  display: flex;
  gap: 10px;
  max-width: 480px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}
.el-final__form input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 14px 18px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--el-border);
  border-radius: 12px;
  color: #fff;
  font-size: 1rem;
  outline: none;
}
.el-final__form input::placeholder { color: var(--el-text-dim); }
.el-final__form input:focus { border-color: var(--el-primary); background: rgba(255,255,255,0.12); }

.el-footer {
  position: relative;
  z-index: 1;
  padding: 24px;
  text-align: center;
  color: var(--el-text-dim);
  font-size: 0.8rem;
  border-top: 1px solid var(--el-border);
  width: 100%;
}
.el-footer a { color: var(--el-text-mut); text-decoration: none; }
.el-footer a:hover { color: var(--el-primary); }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  .el-section { padding: 48px 14px; }
  .el-section__head { margin-bottom: 28px; }
  .el-h2 { font-size: clamp(1.4rem, 5.5vw, 2rem); }
  .el-section__sub { font-size: 0.88rem; }

  .el-hero { padding: 60px 16px; min-height: auto; }
  .el-hero__headline { margin-bottom: 14px; }
  .el-hero__sub { font-size: 0.95rem; margin-bottom: 28px; }
  .el-hero__cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .el-hero__cta .el-btn { width: 100%; justify-content: center; }
  .el-wave { width: 260px; height: 260px; }

  .el-problem__grid { grid-template-columns: 1fr; }
  .el-problem__side { min-height: 44vh; padding: 44px 18px; gap: 14px; }

  .el-solution__grid { grid-template-columns: 1fr; gap: 18px; margin-bottom: 28px; }
  .el-solution__col { padding: 20px; }
  .el-solution__col h3 { font-size: 1rem; margin-bottom: 12px; }
  .el-solution__col li { font-size: 0.88rem; }
  .el-solution__engine { min-height: 200px; }
  .el-engine-ring { width: 180px; height: 180px; }
  .el-engine-ring__label { font-size: 0.95rem; }
  .el-minidemo { padding: 12px 14px; font-size: 0.78rem; gap: 8px; margin-bottom: 36px; }

  /* 비교표 — 3컬럼으로 축소해 한 화면에 전부 보이게 */
  .el-compare { margin-top: 28px; }
  .el-compare__title { font-size: 1.1rem; margin-bottom: 14px; }
  .el-compare__table { font-size: 0.78rem; }
  .el-compare__table th, .el-compare__table td { padding: 9px 4px; }
  .el-compare__table th { font-size: 0.62rem; letter-spacing: 0.02em; }
  .el-compare__table th:first-child { width: 46%; }
  .el-compare__table th:not(:first-child) { width: 18%; }
  .el-compare__feature { font-size: 0.74rem; padding-left: 10px !important; }
  .el-compare__caption { margin-top: 14px; font-size: 0.78rem; }

  .el-features__grid { grid-template-columns: 1fr; gap: 14px; }
  .el-feature { padding: 20px 18px; }
  .el-feature__icon { width: 48px; height: 48px; margin-bottom: 12px; }
  .el-feature h3 { font-size: 1.05rem; }
  .el-feature__desc { font-size: 0.82rem; }

  .el-auto__pipeline { flex-direction: column; gap: 8px; margin-bottom: 28px; }
  .el-auto__arrow { transform: rotate(90deg); }
  .el-auto__num { width: 38px; height: 38px; }
  .el-auto__label { font-size: 0.85rem; }
  .el-auto__stats { grid-template-columns: 1fr; gap: 10px; margin-bottom: 20px; }
  .el-stat { padding: 18px; }
  .el-stat strong { font-size: 1.6rem; }
  .el-auto__platforms { font-size: 0.78rem; padding: 12px; }

  .el-exp__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .el-exp__card { padding: 22px 18px; min-height: 180px; gap: 8px; }
  .el-exp__card h3 { font-size: 1.15rem; }
  .el-exp__card p { font-size: 0.82rem; }

  .el-together__grid { grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
  .el-together__step { padding: 20px 16px; }
  .el-together__step h3 { font-size: 1rem; }
  .el-together__step p { font-size: 0.78rem; }
  .el-together__notice { font-size: 0.8rem; padding: 12px 14px; }

  .el-real__grid { grid-template-columns: 1fr; gap: 14px; }
  .el-real__card { padding: 22px 18px; min-height: auto; }
  .el-real__card h3 { font-size: 1.1rem; }
  .el-real__desc { font-size: 0.82rem; }
  .el-real__caption { font-size: 0.82rem; margin-top: 22px; }

  .el-final__inner { padding: 60px 18px; }
  .el-final__sub { margin-bottom: 28px; font-size: 0.92rem; }
  .el-final__form { flex-direction: column; gap: 10px; }
  .el-final__form input, .el-final__form button { width: 100%; }
  .el-footer { padding: 18px; font-size: 0.72rem; }
}

@media (max-width: 480px) {
  .el-section { padding: 44px 12px; }
  .el-exp__grid { grid-template-columns: 1fr; }
  .el-together__grid { grid-template-columns: 1fr; }
  .el-compare__table { font-size: 0.72rem; }
  .el-compare__table th, .el-compare__table td { padding: 8px 3px; }
  .el-compare__feature { font-size: 0.7rem; padding-left: 8px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .el-wave, .el-engine-ring, .el-final__bg, .el-minidemo__dot, .el-wave-alive path {
    animation: none !important;
  }
}
/* AutoIncome 랜딩 — 에메랄드 + 골드 (수익·자동화 톤) */

:root {
  --ai-primary: #059669;
  --ai-primary-dark: #047857;
  --ai-primary-light: #10B981;
  --ai-accent: #F59E0B;
  --ai-accent-dark: #D97706;
  --ai-warn: #EF4444;
  --ai-bg: #FFFFFF;
  --ai-bg-alt: #ECFDF5;
  --ai-bg-dark: #022C22;
  --ai-text: #0F172A;
  --ai-text-muted: #64748B;
  --ai-border: #D1FAE5;
  --ai-radius: 16px;
}

.ai-landing {
  font-family: 'Noto Sans KR', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ai-text);
  background: var(--ai-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.ai-landing * { box-sizing: border-box; }

/* ---------- Nav ---------- */
.ai-nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0);
  transition: background 0.3s, box-shadow 0.3s, backdrop-filter 0.3s;
}
.ai-nav.scrolled {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(2, 44, 34, 0.08);
}
.ai-nav-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 18px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.ai-logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 1.15rem;
  color: var(--ai-primary-dark); text-decoration: none;
}
.ai-logo-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg, var(--ai-primary), var(--ai-accent));
  color: white; font-size: 1.1rem;
}
.ai-nav-menu {
  display: flex; gap: 28px; list-style: none; margin: 0; padding: 0;
}
.ai-nav-menu a {
  color: var(--ai-text); text-decoration: none;
  font-size: 0.95rem; font-weight: 500; transition: color 0.2s;
}
.ai-nav-menu a:hover { color: var(--ai-primary); }
.ai-nav-cta { display: flex; gap: 10px; }

/* ---------- Buttons ---------- */
.ai-btn-primary, .ai-btn-secondary, .ai-btn-ghost, .ai-btn-outline {
  border: none; cursor: pointer;
  padding: 10px 20px; border-radius: 10px;
  font-weight: 600; font-size: 0.95rem;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s, color 0.2s;
}
.ai-btn-primary {
  background: linear-gradient(135deg, var(--ai-primary), var(--ai-primary-light));
  color: white;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.30);
}
.ai-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(5, 150, 105, 0.40); }
.ai-btn-secondary {
  background: var(--ai-accent); color: #0F172A;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.30);
}
.ai-btn-secondary:hover { background: var(--ai-accent-dark); color: white; transform: translateY(-1px); }
.ai-btn-ghost { background: transparent; color: var(--ai-text); }
.ai-btn-ghost:hover { background: var(--ai-bg-alt); }
.ai-btn-outline {
  background: transparent; color: var(--ai-primary);
  border: 2px solid var(--ai-primary);
}
.ai-btn-outline:hover { background: var(--ai-primary); color: white; }
.ai-btn-primary.large, .ai-btn-secondary.large {
  padding: 16px 32px; font-size: 1.05rem; border-radius: 12px;
}

/* ---------- Section common ---------- */
.ai-section {
  max-width: 1200px; margin: 0 auto;
  padding: 100px 24px;
}
.ai-section-head { text-align: center; margin-bottom: 56px; }
.ai-section-tag {
  display: inline-block;
  padding: 5px 14px;
  background: rgba(5, 150, 105, 0.10);
  color: var(--ai-primary-dark);
  border-radius: 20px;
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 1px; margin-bottom: 16px;
}
.ai-section-tag.dark {
  background: rgba(245, 158, 11, 0.20);
  color: var(--ai-accent);
}
.ai-section-head h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 800; margin: 0 0 12px;
  color: var(--ai-text);
  line-height: 1.25;
}
.ai-section-head p {
  font-size: 1.05rem; color: var(--ai-text-muted); margin: 0;
}
.ai-highlight {
  background: linear-gradient(135deg, var(--ai-primary), var(--ai-accent));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ai-highlight-warn { color: var(--ai-accent); }

/* ---------- 1. Hero ---------- */
.ai-hero {
  position: relative;
  padding: 160px 24px 100px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--ai-bg-alt) 0%, var(--ai-bg) 100%);
}
.ai-hero-bg {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(16, 185, 129, 0.18), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(245, 158, 11, 0.14), transparent 50%);
  pointer-events: none;
}
.ai-hero-inner {
  position: relative; max-width: 900px; margin: 0 auto; text-align: center;
}
.ai-eyebrow {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(5, 150, 105, 0.10);
  color: var(--ai-primary-dark);
  border-radius: 20px;
  font-size: 0.85rem; font-weight: 600;
  margin-bottom: 20px;
}
.ai-hero-headline {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 900; line-height: 1.15;
  margin: 0 0 20px;
  color: var(--ai-text);
}
.ai-hero-subline {
  font-size: 1.25rem;
  color: var(--ai-text);
  font-weight: 600; margin: 0 0 12px;
}
.ai-hero-desc {
  font-size: 1.05rem; color: var(--ai-text-muted);
  margin: 0 auto 32px; max-width: 640px;
}
.ai-hero-desc strong { color: var(--ai-primary-dark); }
.ai-hero-cta {
  display: flex; gap: 12px;
  justify-content: center; flex-wrap: wrap;
  margin-bottom: 48px;
}
.ai-hero-stats {
  display: flex; gap: 40px;
  justify-content: center; flex-wrap: wrap;
}
.ai-hero-stats div { display: flex; flex-direction: column; align-items: center; }
.ai-hero-stats strong {
  font-size: 1.8rem; font-weight: 800;
  color: var(--ai-primary-dark);
}
.ai-hero-stats span { font-size: 0.85rem; color: var(--ai-text-muted); margin-top: 4px; }

/* ---------- 2. Problem ---------- */
.ai-problem-wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 32px;
  align-items: center;
  max-width: 1100px; margin: 0 auto;
}
.ai-problem-list {
  background: white;
  border: 2px solid var(--ai-border);
  border-radius: var(--ai-radius);
  padding: 36px 32px;
}
.ai-problem-list h3 {
  margin: 0 0 18px; color: var(--ai-text);
  font-size: 1.2rem;
}
.ai-problem-list ul { list-style: none; padding: 0; margin: 0; }
.ai-problem-list li {
  padding: 10px 0;
  font-size: 0.98rem; color: var(--ai-text);
  display: flex; align-items: center; gap: 10px;
}
.ai-problem-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(239, 68, 68, 0.12);
  color: var(--ai-warn); font-weight: 800; font-size: 0.85rem;
}
.ai-problem-arrow {
  font-size: 2.4rem;
  color: var(--ai-primary);
  font-weight: 700;
  text-align: center;
}
.ai-solution-card {
  background: linear-gradient(135deg, var(--ai-primary-dark), var(--ai-primary));
  border-radius: var(--ai-radius);
  padding: 36px 32px;
  color: white;
  box-shadow: 0 20px 50px rgba(5, 150, 105, 0.30);
}
.ai-solution-card h3 {
  margin: 0 0 18px; color: white; font-size: 1.25rem;
}
.ai-solution-card ul { list-style: none; padding: 0; margin: 0 0 24px; }
.ai-solution-card li {
  padding: 10px 0; font-size: 1rem;
  display: flex; align-items: center; gap: 10px;
}
.ai-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ai-accent); color: #0F172A;
  font-weight: 800; font-size: 0.85rem;
}
.ai-solution-card .ai-btn-primary {
  background: var(--ai-accent); color: #0F172A;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
}
.ai-solution-card .ai-btn-primary:hover { background: white; color: var(--ai-primary-dark); }

/* ---------- 3. Values ---------- */
.ai-values { background: var(--ai-bg-alt); max-width: none; padding-left: 24px; padding-right: 24px; }
.ai-values-grid {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.ai-value-card {
  background: white;
  border-radius: var(--ai-radius);
  padding: 36px 24px;
  text-align: center;
  border: 2px solid transparent;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.ai-value-card:hover {
  transform: translateY(-4px);
  border-color: var(--ai-primary-light);
  box-shadow: 0 12px 32px rgba(5, 150, 105, 0.12);
}
.ai-value-icon { font-size: 2.4rem; margin-bottom: 12px; }
.ai-value-card h3 {
  margin: 0 0 8px; color: var(--ai-primary-dark); font-size: 1.15rem;
}
.ai-value-card p { margin: 0; font-size: 0.92rem; color: var(--ai-text-muted); }

/* ---------- 4. Solutions ---------- */
.ai-solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.ai-solution-card {
  background: white;
  border: 2px solid var(--ai-border);
  border-radius: var(--ai-radius);
  padding: 28px 26px;
  display: flex; flex-direction: column;
  position: relative;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.ai-solution-card:hover {
  transform: translateY(-4px);
  border-color: var(--ai-primary);
  box-shadow: 0 14px 36px rgba(5, 150, 105, 0.14);
}
.ai-solution-card.hot {
  border-color: var(--ai-accent);
  background: linear-gradient(180deg, #FFFBEB 0%, white 60%);
}
.ai-hot-badge {
  position: absolute; top: -10px; right: 18px;
  background: var(--ai-accent); color: #0F172A;
  font-size: 0.72rem; font-weight: 800;
  padding: 5px 11px; border-radius: 14px;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}
.ai-solution-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.ai-solution-icon {
  font-size: 2.2rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--ai-bg-alt);
}
.ai-solution-num {
  font-size: 0.85rem; font-weight: 800;
  color: var(--ai-primary); opacity: 0.6;
  letter-spacing: 1px;
}
.ai-solution-card h3 {
  margin: 0 0 10px;
  font-size: 1.2rem;
  color: var(--ai-text);
}
.ai-solution-card > p {
  margin: 0 0 16px;
  color: var(--ai-text-muted);
  font-size: 0.92rem;
  flex: 1;
}
.ai-solution-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 18px;
}
.ai-solution-tags span {
  font-size: 0.74rem;
  padding: 4px 10px;
  background: var(--ai-bg-alt);
  color: var(--ai-primary-dark);
  border-radius: 12px;
  font-weight: 600;
}

/* ---------- 5. Journey ---------- */
.ai-journey { background: var(--ai-bg-alt); max-width: none; padding-left: 24px; padding-right: 24px; }
.ai-journey-grid {
  max-width: 1000px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.ai-journey-card {
  background: white;
  border-radius: var(--ai-radius);
  padding: 36px 28px;
  text-align: center;
  border: 2px solid transparent;
  position: relative;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.ai-journey-card:hover {
  transform: translateY(-4px);
  border-color: var(--ai-primary);
  box-shadow: 0 12px 32px rgba(5, 150, 105, 0.12);
}
.ai-journey-icon {
  font-size: 2.6rem; margin-bottom: 12px;
}
.ai-journey-num {
  display: inline-block;
  font-size: 0.78rem; letter-spacing: 1px;
  font-weight: 800;
  color: var(--ai-accent-dark);
  margin-bottom: 10px;
}
.ai-journey-card h3 {
  margin: 0 0 10px;
  font-size: 1.2rem; color: var(--ai-text);
}
.ai-journey-card p {
  margin: 0; color: var(--ai-text-muted); font-size: 0.93rem;
}
.ai-journey-arrow {
  display: none; /* PC 에서는 grid 에 의해 가로 배치 */
}
.ai-journey-cta { text-align: center; margin-top: 48px; }

/* ---------- 6. Revenue Loop ---------- */
.ai-revenue-flow {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 1100px; margin: 0 auto 32px;
}
.ai-revenue-step {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px;
  padding: 20px 22px;
  background: white;
  border: 2px solid var(--ai-border);
  border-radius: 14px;
  min-width: 130px;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.ai-revenue-step:hover {
  transform: translateY(-3px);
  border-color: var(--ai-primary);
  box-shadow: 0 10px 26px rgba(5, 150, 105, 0.12);
}
.ai-revenue-icon { font-size: 2rem; }
.ai-revenue-label {
  font-size: 0.92rem; font-weight: 700;
  color: var(--ai-primary-dark);
}
.ai-revenue-arrow {
  font-size: 1.6rem;
  color: var(--ai-primary);
  font-weight: 700;
}
.ai-revenue-loop-badge {
  display: inline-block;
  padding: 12px 24px;
  background: linear-gradient(135deg, var(--ai-primary), var(--ai-accent));
  color: white;
  font-weight: 700;
  border-radius: 999px;
  margin: 0 auto;
  position: relative; left: 50%; transform: translateX(-50%);
  box-shadow: 0 8px 24px rgba(5, 150, 105, 0.3);
}

/* ---------- 7. Trust ---------- */
.ai-trust-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.ai-trust-card {
  background: white;
  border: 2px solid var(--ai-border);
  border-radius: var(--ai-radius);
  padding: 32px 26px;
  text-align: center;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.ai-trust-card:hover {
  transform: translateY(-4px);
  border-color: var(--ai-primary);
  box-shadow: 0 12px 32px rgba(5, 150, 105, 0.12);
}
.ai-trust-icon { font-size: 2.4rem; margin-bottom: 12px; }
.ai-trust-card h3 {
  margin: 0 0 8px; font-size: 1.15rem; color: var(--ai-primary-dark);
}
.ai-trust-card p { margin: 0; font-size: 0.93rem; color: var(--ai-text-muted); }

/* ---------- 8. Final CTA ---------- */
.ai-final-cta {
  background: linear-gradient(135deg, var(--ai-bg-dark) 0%, #064E3B 100%);
  color: white;
  padding: 110px 24px;
  text-align: center;
}
.ai-final-cta-inner { max-width: 820px; margin: 0 auto; }
.ai-final-cta h2 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 900; margin: 0 0 18px;
  line-height: 1.2;
  color: white;
}
.ai-final-cta p {
  font-size: 1.15rem; opacity: 0.9; margin: 0 0 36px;
}
.ai-final-cta .ai-btn-secondary {
  background: rgba(255, 255, 255, 0.10);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.30);
  box-shadow: none;
}
.ai-final-cta .ai-btn-secondary:hover {
  background: white; color: var(--ai-primary-dark); border-color: white;
}

/* ---------- Footer ---------- */
.ai-footer {
  background: var(--ai-bg-dark);
  color: #A7F3D0;
  padding: 56px 24px 32px;
}
.ai-footer-inner { max-width: 1200px; margin: 0 auto; text-align: center; }
.ai-footer-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 1.2rem; font-weight: 800; color: white;
  margin-bottom: 10px;
}
.ai-footer-tag { color: #6EE7B7; font-size: 0.95rem; margin: 0 0 24px; }
.ai-footer-links {
  display: flex; gap: 24px;
  justify-content: center; flex-wrap: wrap;
  margin-bottom: 20px;
}
.ai-footer-links a {
  color: #A7F3D0; text-decoration: none;
  font-size: 0.9rem; transition: color 0.2s;
}
.ai-footer-links a:hover { color: var(--ai-accent); }
.ai-footer-copy { color: #4B7C66; font-size: 0.82rem; margin: 0; }

/* ---------- Responsive (mobile first 보강) ---------- */
@media (max-width: 1000px) {
  .ai-solutions-grid { grid-template-columns: repeat(2, 1fr); }
  .ai-values-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .ai-nav-menu { display: none; }
  .ai-section { padding: 72px 20px; }
  .ai-hero { padding: 130px 20px 70px; }
  .ai-hero-stats { gap: 24px; }

  .ai-problem-wrap { grid-template-columns: 1fr; }
  .ai-problem-arrow { transform: rotate(90deg); font-size: 2rem; }

  .ai-journey-grid, .ai-trust-grid {
    grid-template-columns: 1fr; gap: 16px;
  }
  .ai-revenue-flow { gap: 10px; }
  .ai-revenue-step { min-width: 100px; padding: 14px 14px; }
  .ai-revenue-step .ai-revenue-icon { font-size: 1.6rem; }
  .ai-revenue-arrow { font-size: 1.2rem; }

  .ai-final-cta { padding: 80px 20px; }
}
@media (max-width: 600px) {
  .ai-solutions-grid { grid-template-columns: 1fr; }
  .ai-values-grid { grid-template-columns: 1fr; }
  .ai-hero-cta { flex-direction: column; align-items: stretch; }
  .ai-btn-primary.large, .ai-btn-secondary.large { width: 100%; }
  .ai-section-head h2 { font-size: 1.6rem; }
  .ai-revenue-flow {
    flex-direction: column;
  }
  .ai-revenue-arrow { transform: rotate(90deg); }
}
/* PlayChat 랜딩 — 다크 + 오로라 그라디언트. 모든 셀렉터는 .pc-landing 하위로 격리. */

.pc-landing {
  --pc-bg-primary: #0A0A14;
  --pc-bg-secondary: #12121F;
  --pc-bg-card: #1A1A2E;
  --pc-bg-elevated: #252540;
  --pc-border: #2D2D44;
  --pc-text-primary: #F3F4F6;
  --pc-text-secondary: #9CA3AF;
  --pc-text-muted: #6B7280;
  --pc-accent-purple: #8B5CF6;
  --pc-accent-pink: #EC4899;
  --pc-accent-teal: #14B8A6;
  --pc-accent-gold: #F59E0B;
  --pc-accent-green: #10B981;
  --pc-gradient-primary: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
  --pc-gradient-aurora: linear-gradient(135deg, #8B5CF6 0%, #EC4899 33%, #F59E0B 66%, #14B8A6 100%);
  --pc-gradient-dark: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);

  font-family: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--pc-bg-primary);
  color: var(--pc-text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
  scroll-behavior: smooth;
}
.pc-landing * { box-sizing: border-box; }
.pc-landing h1, .pc-landing h2, .pc-landing h3, .pc-landing h4, .pc-landing p, .pc-landing ul {
  margin: 0; padding: 0;
}
.pc-landing ul { list-style: none; }

/* ─────────── Navigation ─────────── */
.pc-landing .pc-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(10, 10, 20, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--pc-border);
  padding: 16px 0;
}
.pc-landing .pc-nav-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
}
.pc-landing .pc-nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 20px;
  color: var(--pc-text-primary); text-decoration: none;
}
.pc-landing .pc-nav-logo-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--pc-gradient-primary);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.pc-landing .pc-nav-logo span {
  background: var(--pc-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pc-landing .pc-nav-links { display: flex; gap: 28px; }
.pc-landing .pc-nav-links a {
  color: var(--pc-text-secondary); text-decoration: none;
  font-size: 14px; font-weight: 500;
  transition: color 0.2s;
}
.pc-landing .pc-nav-links a:hover { color: var(--pc-text-primary); }
.pc-landing .pc-nav-cta {
  background: var(--pc-gradient-primary); color: #fff; border: none;
  padding: 10px 20px; border-radius: 10px;
  font-size: 13px; font-weight: 600;
  cursor: pointer; transition: transform 0.2s;
}
.pc-landing .pc-nav-cta:hover { transform: translateY(-1px); }

/* ─────────── Hero ─────────── */
.pc-landing .pc-hero {
  min-height: 100vh;
  padding: 140px 24px 80px;
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.pc-landing .pc-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(20, 184, 166, 0.08) 0%, transparent 50%);
}
.pc-landing .pc-hero-bg::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 15% 30%, rgba(255,255,255,0.05) 1px, transparent 1px),
    radial-gradient(circle at 85% 70%, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: pc-float 20s ease-in-out infinite;
}
@keyframes pc-float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(30px, -30px); }
}
.pc-landing .pc-hero-inner {
  max-width: 900px; width: 100%; position: relative; z-index: 1;
  text-align: center;
}
.pc-landing .pc-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.3);
  padding: 8px 16px; border-radius: 24px;
  font-size: 13px; color: #C084FC; font-weight: 500;
  margin-bottom: 24px;
}
.pc-landing .pc-hero-badge-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #C084FC;
  animation: pc-pulse 2s infinite;
}
@keyframes pc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.pc-landing .pc-hero h1 {
  font-size: clamp(36px, 6vw, 68px);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 20px;
  letter-spacing: -0.02em;
  color: var(--pc-text-primary);
}
.pc-landing .pc-gradient-text {
  background: var(--pc-gradient-aurora);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}
.pc-landing .pc-gradient-text-inline {
  background: var(--pc-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pc-landing .pc-hero-subtitle {
  font-size: clamp(16px, 2vw, 20px);
  color: var(--pc-text-secondary);
  margin-bottom: 40px;
  font-weight: 400;
}
.pc-landing .pc-hero-input-box {
  background: var(--pc-bg-card);
  border: 1px solid var(--pc-border);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  text-align: left;
  margin-bottom: 32px;
}
.pc-landing .pc-hero-input-label {
  font-size: 13px; color: var(--pc-text-secondary);
  margin-bottom: 10px; font-weight: 500;
  display: flex; align-items: center; gap: 6px;
}
.pc-landing .pc-hero-input-wrapper { position: relative; margin-bottom: 16px; }
.pc-landing .pc-hero-input {
  width: 100%;
  background: var(--pc-bg-primary);
  border: 1px solid var(--pc-border);
  border-radius: 14px;
  padding: 18px 20px;
  color: var(--pc-text-primary);
  font-size: 16px;
  font-family: inherit;
  transition: all 0.2s;
}
.pc-landing .pc-hero-input:focus {
  outline: none;
  border-color: var(--pc-accent-purple);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);
}
.pc-landing .pc-hero-input::placeholder { color: var(--pc-text-muted); }
.pc-landing .pc-hero-categories {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px;
}
.pc-landing .pc-hero-category {
  background: var(--pc-bg-elevated);
  border: 1px solid var(--pc-border);
  color: var(--pc-text-secondary);
  padding: 8px 16px; border-radius: 10px;
  font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all 0.2s;
}
.pc-landing .pc-hero-category:hover,
.pc-landing .pc-hero-category.active {
  border-color: var(--pc-accent-purple);
  color: var(--pc-text-primary);
  background: rgba(139, 92, 246, 0.1);
}
.pc-landing .pc-hero-play-btn {
  width: 100%;
  background: var(--pc-gradient-primary);
  color: #fff;
  border: none;
  padding: 18px;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: all 0.3s;
  position: relative; overflow: hidden;
}
.pc-landing .pc-hero-play-btn::before {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}
.pc-landing .pc-hero-play-btn:hover::before { left: 100%; }
.pc-landing .pc-hero-play-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px rgba(139, 92, 246, 0.4);
}
.pc-landing .pc-hero-ctas {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.pc-landing .pc-btn-secondary {
  background: transparent;
  border: 1px solid var(--pc-border);
  color: var(--pc-text-primary);
  padding: 14px 28px;
  border-radius: 12px;
  font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
  display: inline-flex; align-items: center; gap: 8px;
}
.pc-landing .pc-btn-secondary:hover {
  border-color: var(--pc-accent-purple);
  background: rgba(139, 92, 246, 0.1);
}

/* ─────────── Section Layout ─────────── */
.pc-landing .pc-section {
  padding: 100px 24px;
  position: relative;
}
.pc-landing .pc-section-inner {
  max-width: 1200px; margin: 0 auto;
}
.pc-landing .pc-section-header {
  text-align: center;
  margin-bottom: 60px;
}
.pc-landing .pc-section-label {
  display: inline-block;
  color: var(--pc-accent-purple);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.pc-landing .pc-section-title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 16px;
  color: var(--pc-text-primary);
}
.pc-landing .pc-section-subtitle {
  font-size: 17px;
  color: var(--pc-text-secondary);
  max-width: 600px; margin: 0 auto;
}

/* ─────────── 3-Step ─────────── */
.pc-landing .pc-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pc-landing .pc-step-card {
  background: var(--pc-bg-card);
  border: 1px solid var(--pc-border);
  border-radius: 20px;
  padding: 40px 32px;
  text-align: center;
  transition: all 0.3s;
  position: relative;
}
.pc-landing .pc-step-card:hover {
  transform: translateY(-4px);
  border-color: var(--pc-accent-purple);
}
.pc-landing .pc-step-number {
  position: absolute;
  top: -16px; left: 32px;
  width: 40px; height: 40px;
  background: var(--pc-gradient-primary);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800;
  color: #fff;
}
.pc-landing .pc-step-icon { font-size: 40px; margin: 16px 0 20px; }
.pc-landing .pc-step-title { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
.pc-landing .pc-step-desc { color: var(--pc-text-secondary); font-size: 14px; }

/* ─────────── Scenarios ─────────── */
.pc-landing .pc-scenarios-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
}
.pc-landing .pc-scenario-group {
  background: var(--pc-bg-card);
  border: 1px solid var(--pc-border);
  border-radius: 20px;
  padding: 24px;
  transition: all 0.3s;
}
.pc-landing .pc-scenario-group:hover { border-color: var(--pc-accent-purple); }
.pc-landing .pc-scenario-group-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--pc-border);
}
.pc-landing .pc-scenario-item {
  background: var(--pc-bg-elevated);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--pc-text-secondary);
  transition: all 0.2s;
  display: flex; align-items: center; gap: 8px;
}
.pc-landing .pc-scenario-item:hover {
  background: rgba(139, 92, 246, 0.15);
  border-color: var(--pc-accent-purple);
  color: var(--pc-text-primary);
  transform: translateX(4px);
}
.pc-landing .pc-scenario-item::before {
  content: '▶'; font-size: 9px; color: var(--pc-accent-purple);
}

/* ─────────── Comparison ─────────── */
.pc-landing .pc-comparison-table {
  background: var(--pc-bg-card);
  border: 1px solid var(--pc-border);
  border-radius: 20px;
  overflow: hidden;
}
.pc-landing .pc-comparison-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 1px solid var(--pc-border);
}
.pc-landing .pc-comparison-row:last-child { border-bottom: none; }
.pc-landing .pc-comparison-row.pc-header {
  background: var(--pc-bg-elevated); font-weight: 700;
}
.pc-landing .pc-comparison-cell {
  padding: 20px 24px;
  display: flex; align-items: center;
  font-size: 15px;
}
.pc-landing .pc-comparison-cell.pc-label {
  color: var(--pc-text-muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pc-landing .pc-comparison-cell.pc-old { color: var(--pc-text-secondary); }
.pc-landing .pc-comparison-cell.pc-new {
  color: var(--pc-accent-purple); font-weight: 600;
}
.pc-landing .pc-comparison-cell.pc-new::before {
  content: '✓  ';
  color: var(--pc-accent-green);
  font-weight: 800;
}

/* ─────────── Resonance ─────────── */
.pc-landing .pc-resonance {
  background: var(--pc-gradient-dark);
  border-radius: 32px;
  padding: 80px 60px;
  position: relative;
  overflow: hidden;
}
.pc-landing .pc-resonance::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(236, 72, 153, 0.15) 0%, transparent 60%);
}
.pc-landing .pc-resonance-inner { position: relative; z-index: 1; }
.pc-landing .pc-resonance-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: center;
}
.pc-landing .pc-resonance h2 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 20px;
  color: var(--pc-text-primary);
}
.pc-landing .pc-resonance p {
  color: var(--pc-text-secondary);
  font-size: 16px;
  margin-bottom: 32px;
  line-height: 1.8;
}
.pc-landing .pc-resonance-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 32px;
}
.pc-landing .pc-resonance-feature {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 13px;
}
.pc-landing .pc-resonance-feature-icon {
  width: 28px; height: 28px;
  background: var(--pc-gradient-primary);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0;
}
.pc-landing .pc-resonance-cta-row {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.pc-landing .pc-resonance-visual {
  position: relative;
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
}
.pc-landing .pc-resonance-circle {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(139, 92, 246, 0.3);
  animation: pc-ripple 4s ease-out infinite;
}
.pc-landing .pc-resonance-circle:nth-child(1) { width: 100%; height: 100%; animation-delay: 0s; }
.pc-landing .pc-resonance-circle:nth-child(2) { width: 75%;  height: 75%;  animation-delay: 1s; }
.pc-landing .pc-resonance-circle:nth-child(3) { width: 50%;  height: 50%;  animation-delay: 2s; }
@keyframes pc-ripple {
  0%   { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(1.3); opacity: 0; }
}
.pc-landing .pc-resonance-core {
  width: 120px; height: 120px;
  border-radius: 50%;
  background: var(--pc-gradient-aurora);
  display: flex; align-items: center; justify-content: center;
  font-size: 48px;
  box-shadow: 0 0 80px rgba(139, 92, 246, 0.5);
  animation: pc-pulse-core 3s ease-in-out infinite;
  z-index: 1;
}
@keyframes pc-pulse-core {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* ─────────── Pricing ─────────── */
.pc-landing .pc-pricing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}
.pc-landing .pc-pricing-card {
  background: var(--pc-bg-card);
  border: 1px solid var(--pc-border);
  border-radius: 24px;
  padding: 40px 36px;
  transition: all 0.3s;
  position: relative;
}
.pc-landing .pc-pricing-card.pc-featured {
  border-color: var(--pc-accent-purple);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(236, 72, 153, 0.05));
  transform: scale(1.02);
}
.pc-landing .pc-pricing-badge {
  position: absolute; top: -12px; right: 24px;
  background: var(--pc-gradient-primary);
  color: #fff;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 11px; font-weight: 700;
}
.pc-landing .pc-pricing-tier {
  font-size: 14px; color: var(--pc-text-secondary);
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.pc-landing .pc-pricing-price {
  font-size: 40px; font-weight: 800;
  margin-bottom: 4px;
}
.pc-landing .pc-pricing-price span {
  font-size: 16px; color: var(--pc-text-secondary); font-weight: 500;
}
.pc-landing .pc-pricing-desc {
  color: var(--pc-text-secondary); font-size: 14px; margin-bottom: 24px;
}
.pc-landing .pc-pricing-features {
  list-style: none; margin-bottom: 28px; padding: 0;
}
.pc-landing .pc-pricing-features li {
  padding: 8px 0; font-size: 14px;
  display: flex; align-items: center; gap: 10px;
}
.pc-landing .pc-pricing-features li::before {
  content: '✓'; color: var(--pc-accent-green); font-weight: 800;
}
.pc-landing .pc-pricing-cta {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
  border: 1px solid var(--pc-border);
  background: transparent;
  color: var(--pc-text-primary);
}
.pc-landing .pc-pricing-cta.pc-primary {
  background: var(--pc-gradient-primary);
  border: none;
  color: #fff;
}
.pc-landing .pc-pricing-cta:hover { transform: translateY(-1px); }

/* ─────────── Founding 100 ─────────── */
.pc-landing .pc-founding {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(139, 92, 246, 0.1));
  border: 1px solid rgba(236, 72, 153, 0.3);
  border-radius: 32px;
  padding: 80px 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.pc-landing .pc-founding::before {
  content: '100';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(200px, 30vw, 400px);
  font-weight: 900;
  color: rgba(255, 255, 255, 0.02);
  letter-spacing: -0.05em;
  pointer-events: none;
  line-height: 1;
}
.pc-landing .pc-founding-inner { position: relative; z-index: 1; }
.pc-landing .pc-founding-badge {
  display: inline-block;
  background: var(--pc-gradient-primary);
  color: #fff;
  padding: 8px 20px;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 24px;
}
.pc-landing .pc-founding h2 {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 20px;
}
.pc-landing .pc-founding p {
  font-size: 17px;
  color: var(--pc-text-secondary);
  max-width: 600px; margin: 0 auto 40px;
}
.pc-landing .pc-founding-benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 0 auto 40px;
  max-width: 800px;
}
.pc-landing .pc-founding-benefit {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 20px 16px;
  text-align: center;
}
.pc-landing .pc-founding-benefit-icon { font-size: 28px; margin-bottom: 10px; }
.pc-landing .pc-founding-benefit-title {
  font-size: 13px; font-weight: 600; color: var(--pc-text-primary);
}
.pc-landing .pc-founding-cta {
  background: var(--pc-gradient-primary);
  color: #fff;
  border: none;
  padding: 18px 40px;
  border-radius: 14px;
  font-size: 16px; font-weight: 700;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  transition: all 0.3s;
  box-shadow: 0 10px 40px rgba(139, 92, 246, 0.3);
}
.pc-landing .pc-founding-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 50px rgba(139, 92, 246, 0.5);
}

/* ─────────── Footer ─────────── */
.pc-landing .pc-footer {
  background: var(--pc-bg-secondary);
  border-top: 1px solid var(--pc-border);
  padding: 60px 24px 30px;
}
.pc-landing .pc-footer-inner { max-width: 1200px; margin: 0 auto; }
.pc-landing .pc-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--pc-border);
}
.pc-landing .pc-footer-brand h3 {
  font-size: 24px; font-weight: 800;
  background: var(--pc-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 12px;
}
.pc-landing .pc-footer-brand p {
  color: var(--pc-text-secondary); font-size: 14px; max-width: 320px;
}
.pc-landing .pc-footer-col h4 {
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--pc-text-muted);
  margin-bottom: 16px;
}
.pc-landing .pc-footer-col a {
  display: block;
  color: var(--pc-text-secondary);
  text-decoration: none;
  font-size: 14px;
  padding: 6px 0;
  transition: color 0.2s;
}
.pc-landing .pc-footer-col a:hover { color: var(--pc-text-primary); }
.pc-landing .pc-footer-bottom {
  padding-top: 30px;
  text-align: center;
  color: var(--pc-text-muted);
  font-size: 13px;
}

/* ─────────── Player (Modal) ─────────── */
.pc-landing .pc-player {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(10, 10, 20, 0.95);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--pc-border);
  padding: 20px 24px;
  z-index: 200;
  transform: translateY(100%);
  transition: transform 0.4s ease;
}
.pc-landing .pc-player.pc-active { transform: translateY(0); }
.pc-landing .pc-player-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
}
.pc-landing .pc-player-album {
  width: 60px; height: 60px;
  background: var(--pc-gradient-aurora);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  animation: pc-spin 20s linear infinite;
}
@keyframes pc-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.pc-landing .pc-player-info-title { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.pc-landing .pc-player-info-meta { font-size: 12px; color: var(--pc-text-secondary); }
.pc-landing .pc-player-controls { display: flex; gap: 12px; align-items: center; }
.pc-landing .pc-player-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--pc-bg-elevated);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  transition: all 0.2s;
}
.pc-landing .pc-player-btn:hover { background: var(--pc-accent-purple); }
.pc-landing .pc-player-btn.pc-main {
  width: 48px; height: 48px;
  background: var(--pc-gradient-primary);
}
.pc-landing .pc-player-btn.pc-close {
  background: transparent;
  border: 1px solid var(--pc-border);
  color: var(--pc-text-secondary);
}

/* ─────────── Responsive ─────────── */
@media (max-width: 960px) {
  .pc-landing .pc-scenarios-container { grid-template-columns: repeat(2, 1fr); }
  .pc-landing .pc-steps { grid-template-columns: 1fr; }
  .pc-landing .pc-resonance-grid { grid-template-columns: 1fr; }
  .pc-landing .pc-resonance { padding: 60px 30px; }
  .pc-landing .pc-pricing { grid-template-columns: 1fr; }
  .pc-landing .pc-founding-benefits { grid-template-columns: repeat(2, 1fr); }
  .pc-landing .pc-founding { padding: 60px 30px; }
  .pc-landing .pc-footer-grid { grid-template-columns: 1fr 1fr; }
  .pc-landing .pc-nav-links { display: none; }
  .pc-landing .pc-comparison-cell { padding: 14px 16px; font-size: 13px; }
}
@media (max-width: 560px) {
  .pc-landing .pc-scenarios-container { grid-template-columns: 1fr; }
  .pc-landing .pc-footer-grid { grid-template-columns: 1fr; }
  .pc-landing .pc-section { padding: 60px 20px; }
  .pc-landing .pc-hero { padding: 110px 20px 60px; }
}
/* ShopLink — Dark Neon Blue Commerce Theme */
/* sl- 네임스페이스로 전역 충돌 방지 */

/* ── 디자인 토큰 ── */
:root {
  --sl-bg:        #030b18;
  --sl-bg-alt:    #050d1f;
  --sl-bg-card:   rgba(255, 255, 255, 0.04);
  --sl-neon:      #00d4ff;
  --sl-neon-dim:  rgba(0, 212, 255, 0.12);
  --sl-blue:      #0066ff;
  --sl-blue-dark: #0044cc;
  --sl-purple:    #7c3aed;
  --sl-green:     #00ffa3;
  --sl-amber:     #f59e0b;
  --sl-red:       #f87171;
  --sl-text:      #e2e8f0;
  --sl-muted:     #94a3b8;
  --sl-dim:       #64748b;
  --sl-border:    rgba(0, 212, 255, 0.18);
  --sl-radius:    16px;
  --sl-font:      'Noto Sans KR', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── 기반 ── */
.sl-root {
  font-family: var(--sl-font);
  background: var(--sl-bg);
  color: var(--sl-text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
.sl-root * { box-sizing: border-box; }

/* ── Nav ── */
.sl-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: transparent;
  transition: background 0.3s, backdrop-filter 0.3s, box-shadow 0.3s;
}
.sl-nav.sl-scrolled {
  background: rgba(3, 11, 24, 0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 rgba(0, 212, 255, 0.12);
}
.sl-nav-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 14px 24px;
  display: flex; align-items: center; gap: 20px;
}
.sl-logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 900; font-size: 1.15rem;
  color: #fff; text-decoration: none; flex-shrink: 0;
}
.sl-logo-mark {
  width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0066ff, #00d4ff);
  font-size: 1rem; font-weight: 900;
  box-shadow: 0 0 14px rgba(0, 212, 255, 0.45);
  color: #000;
}
.sl-logo-name { color: #fff; }
.sl-logo-name em { color: var(--sl-neon); font-style: normal; }

.sl-nav-links {
  flex: 1; display: flex; gap: 6px; list-style: none; margin: 0; padding: 0;
  justify-content: center;
}
.sl-nav-links a {
  color: var(--sl-muted); text-decoration: none;
  font-size: 0.88rem; font-weight: 500;
  padding: 6px 12px; border-radius: 8px;
  transition: color 0.2s, background 0.2s;
  display: block;
}
.sl-nav-links a:hover,
.sl-nav-links a.active { color: var(--sl-neon); background: rgba(0, 212, 255, 0.06); }

.sl-nav-cta { display: flex; gap: 8px; margin-left: auto; }

/* ── 버튼 ── */
.sl-btn, .sl-btn-outline, .sl-btn-ghost {
  border: none; cursor: pointer;
  padding: 10px 22px; border-radius: 10px;
  font-weight: 700; font-size: 0.9rem;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: all 0.2s ease;
  font-family: var(--sl-font);
  line-height: 1;
}
.sl-btn {
  background: linear-gradient(135deg, var(--sl-blue), var(--sl-neon));
  color: #000;
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.22);
}
.sl-btn:hover { transform: translateY(-2px); box-shadow: 0 0 32px rgba(0, 212, 255, 0.45); }
.sl-btn.lg { padding: 15px 34px; font-size: 1rem; border-radius: 12px; }

.sl-btn-outline {
  background: transparent;
  color: var(--sl-neon);
  border: 1.5px solid rgba(0, 212, 255, 0.5);
}
.sl-btn-outline:hover {
  background: rgba(0, 212, 255, 0.08);
  border-color: var(--sl-neon);
  box-shadow: 0 0 18px rgba(0, 212, 255, 0.2);
}
.sl-btn-outline.lg { padding: 14px 32px; font-size: 1rem; border-radius: 12px; }

.sl-btn-ghost {
  background: transparent; color: var(--sl-muted);
  border: 1px solid transparent;
}
.sl-btn-ghost:hover { color: #fff; background: rgba(255,255,255,0.05); }

/* ── 공통 섹션 ── */
.sl-wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.sl-section { padding: 96px 24px; max-width: 1280px; margin: 0 auto; }
.sl-section-alt { background: linear-gradient(180deg, var(--sl-bg) 0%, #040e22 50%, var(--sl-bg) 100%); }

.sl-head { text-align: center; margin-bottom: 60px; }
.sl-tag {
  display: inline-block;
  padding: 4px 14px; border-radius: 100px;
  border: 1px solid rgba(0, 212, 255, 0.4);
  color: var(--sl-neon); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 18px;
  background: rgba(0, 212, 255, 0.07);
}
.sl-head h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 900; color: #fff;
  margin: 0 0 14px; line-height: 1.2;
}
.sl-head p { font-size: 1.05rem; color: var(--sl-muted); margin: 0; line-height: 1.6; }
.sl-neon { color: var(--sl-neon); }
.sl-neon-glow { color: var(--sl-neon); text-shadow: 0 0 28px rgba(0, 212, 255, 0.55); }

/* ── 글래스 카드 ── */
.sl-glass {
  background: var(--sl-bg-card);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.sl-glass:hover {
  border-color: rgba(0, 212, 255, 0.38);
  box-shadow: 0 0 24px rgba(0, 212, 255, 0.1);
}

/* ── HERO ── */
.sl-hero {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  padding: 130px 24px 90px;
  text-align: center;
}
.sl-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(0,102,255,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 50% 35% at 80% 65%, rgba(0,212,255,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 15% 70%, rgba(124,58,237,0.07) 0%, transparent 60%);
}
.sl-hero-grid {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(0, 212, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}
.sl-hero-inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }

.sl-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 16px; border-radius: 100px;
  border: 1px solid rgba(0, 212, 255, 0.35);
  background: rgba(0, 212, 255, 0.07);
  color: var(--sl-neon); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  margin-bottom: 28px;
}
.sl-hero-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sl-neon); animation: sl-blink 1.6s infinite; }
@keyframes sl-blink { 0%,100%{opacity:1} 50%{opacity:0.25} }

.sl-hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  font-weight: 900; color: #fff; line-height: 1.1;
  margin: 0 0 24px;
}
.sl-hero-sub {
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  color: var(--sl-muted); margin-bottom: 14px; line-height: 1.65;
}
.sl-hero-desc {
  font-size: 1rem; color: var(--sl-dim); margin-bottom: 44px; line-height: 1.75;
}
.sl-hero-desc strong { color: #cbd5e1; }
.sl-hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 64px; }

.sl-hero-stats { display: flex; gap: 48px; justify-content: center; flex-wrap: wrap; }
.sl-hero-stats > div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sl-hero-stats strong {
  font-size: 2rem; font-weight: 900;
  background: linear-gradient(135deg, #fff 30%, var(--sl-neon));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sl-hero-stats span { font-size: 0.78rem; color: var(--sl-dim); letter-spacing: 0.02em; }

/* ── 채널 마키 ── */
.sl-marquee-wrap {
  overflow: hidden; position: relative;
  border-top: 1px solid rgba(0,212,255,0.08);
  border-bottom: 1px solid rgba(0,212,255,0.08);
  background: rgba(0,212,255,0.02);
  padding: 20px 0;
}
.sl-marquee-track {
  display: flex; gap: 24px; width: max-content;
  animation: sl-marquee 24s linear infinite;
}
.sl-marquee-track:hover { animation-play-state: paused; }
@keyframes sl-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.sl-channel-badge {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 20px; border-radius: 100px;
  border: 1px solid rgba(0,212,255,0.14);
  background: rgba(255,255,255,0.03);
  color: var(--sl-muted); font-size: 0.88rem; font-weight: 600;
  white-space: nowrap; flex-shrink: 0;
}
.sl-channel-badge .ch-icon { font-size: 1.1rem; }

/* ── 문제/해결 섹션 ── */
.sl-problem-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.sl-pbox {
  padding: 32px; border-radius: var(--sl-radius);
  border: 1px solid;
}
.sl-pbox.bad  { border-color: rgba(248,113,113,0.28); background: rgba(248,113,113,0.04); }
.sl-pbox.good { border-color: rgba(0,212,255,0.28);   background: rgba(0,212,255,0.04); }
.sl-pbox h3 { font-weight: 800; font-size: 1rem; margin: 0 0 18px; }
.sl-pbox.bad  h3 { color: #fca5a5; }
.sl-pbox.good h3 { color: var(--sl-neon); }
.sl-pbox ul { padding: 0; margin: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.sl-pbox ul li { font-size: 0.9rem; display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; color: var(--sl-muted); }
.sl-pbox.bad  ul li::before { content: '✖'; color: #f87171; font-size: 0.72rem; margin-top: 3px; flex-shrink: 0; }
.sl-pbox.good ul li::before { content: '✓'; color: var(--sl-neon); font-weight: 700; flex-shrink: 0; }
.sl-pbox.good ul li { color: #cbd5e1; }
.sl-pbox-cta { margin-top: 24px; }

/* ── 아키텍처 레이어 ── */
.sl-arch-layers { display: flex; flex-direction: column; gap: 12px; max-width: 860px; margin: 0 auto; }
.sl-arch-layer {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 24px; border-radius: var(--sl-radius);
  border: 1px solid;
  cursor: default; transition: transform 0.2s, box-shadow 0.2s;
}
.sl-arch-layer:hover { transform: translateX(8px); }

.sl-arch-layer.ai         { border-color: rgba(0,212,255,0.38);   background: rgba(0,212,255,0.06);   box-shadow: 0 0 20px rgba(0,212,255,0.06); }
.sl-arch-layer.influencer { border-color: rgba(124,58,237,0.38);  background: rgba(124,58,237,0.06);  box-shadow: 0 0 20px rgba(124,58,237,0.06); }
.sl-arch-layer.commerce   { border-color: rgba(0,255,163,0.35);   background: rgba(0,255,163,0.05);   box-shadow: 0 0 20px rgba(0,255,163,0.06); }
.sl-arch-layer.offline    { border-color: rgba(245,158,11,0.35);  background: rgba(245,158,11,0.05);  box-shadow: 0 0 20px rgba(245,158,11,0.06); }
.sl-arch-layer.supply     { border-color: rgba(248,113,113,0.35); background: rgba(248,113,113,0.05); box-shadow: 0 0 20px rgba(248,113,113,0.06); }

.sl-arch-icon { font-size: 1.8rem; width: 48px; text-align: center; flex-shrink: 0; }
.sl-arch-info { flex: 1; min-width: 0; }
.sl-arch-info h3 { font-weight: 800; font-size: 0.97rem; color: #fff; margin: 0 0 4px; }
.sl-arch-info p  { font-size: 0.83rem; color: var(--sl-muted); margin: 0; }
.sl-arch-badge {
  font-size: 0.7rem; font-weight: 700; padding: 3px 10px;
  border-radius: 100px; white-space: nowrap; flex-shrink: 0;
}
.sl-arch-layer.ai         .sl-arch-badge { background: rgba(0,212,255,0.14); color: var(--sl-neon);  border: 1px solid rgba(0,212,255,0.3); }
.sl-arch-layer.influencer .sl-arch-badge { background: rgba(124,58,237,0.14); color: #a78bfa;        border: 1px solid rgba(124,58,237,0.3); }
.sl-arch-layer.commerce   .sl-arch-badge { background: rgba(0,255,163,0.10); color: var(--sl-green); border: 1px solid rgba(0,255,163,0.3); }
.sl-arch-layer.offline    .sl-arch-badge { background: rgba(245,158,11,0.10); color: #fbbf24;        border: 1px solid rgba(245,158,11,0.3); }
.sl-arch-layer.supply     .sl-arch-badge { background: rgba(248,113,113,0.10); color: #fca5a5;       border: 1px solid rgba(248,113,113,0.3); }

.sl-arch-connector {
  display: flex; justify-content: center; padding: 2px 0;
  color: rgba(0,212,255,0.3); font-size: 1rem;
}

/* ── 기능 카드 ── */
.sl-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.sl-feature-card { padding: 30px; }
.sl-feature-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; margin-bottom: 18px;
}
.sl-feature-card h3 { font-weight: 800; font-size: 1.05rem; color: #fff; margin: 0 0 10px; }
.sl-feature-card > p { font-size: 0.88rem; color: var(--sl-muted); margin: 0 0 16px; line-height: 1.65; }
.sl-feature-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sl-ftag {
  font-size: 0.72rem; padding: 3px 10px; border-radius: 100px;
  background: rgba(0,212,255,0.07); color: var(--sl-neon);
  border: 1px solid rgba(0,212,255,0.2);
}

/* ── AI 섹션 ── */
.sl-ai-wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
  max-width: 1280px; margin: 0 auto; padding: 0 24px;
}
.sl-ai-content h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); font-weight: 900; color: #fff; margin: 0 0 16px; line-height: 1.2; }
.sl-ai-content > p { color: var(--sl-muted); line-height: 1.7; margin-bottom: 24px; }
.sl-ai-steps { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.sl-ai-step {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px; border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(0,212,255,0.1);
}
.sl-ai-step-n {
  width: 26px; height: 26px; border-radius: 7px;
  background: linear-gradient(135deg, var(--sl-blue), var(--sl-neon));
  color: #000; font-size: 0.75rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sl-ai-step span { color: #cbd5e1; font-size: 0.88rem; }

/* AI 시각화 — 궤도 애니메이션 */
.sl-ai-visual {
  display: flex; align-items: center; justify-content: center;
  min-height: 320px;
}
.sl-orbit-wrap {
  position: relative; width: 280px; height: 280px;
  display: flex; align-items: center; justify-content: center;
}
.sl-orbit-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(0,212,255,0.15);
}
.sl-orbit-ring::after {
  content: ''; position: absolute; inset: -22px; border-radius: 50%;
  border: 1px solid rgba(0,212,255,0.07);
}
.sl-orbit-core {
  width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,102,255,0.5) 0%, rgba(0,212,255,0.2) 60%, transparent 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; position: relative; z-index: 2;
  animation: sl-pulse 3s ease-in-out infinite;
  box-shadow: 0 0 40px rgba(0,212,255,0.35);
}
@keyframes sl-pulse {
  0%,100% { box-shadow: 0 0 40px rgba(0,212,255,0.35); }
  50%      { box-shadow: 0 0 70px rgba(0,212,255,0.65), 0 0 120px rgba(0,102,255,0.25); }
}
.sl-orbit-node {
  position: absolute; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; z-index: 2;
  background: rgba(0,212,255,0.15);
  border: 1px solid rgba(0,212,255,0.35);
  animation: sl-orbit 9s linear infinite;
}
.sl-orbit-node:nth-child(3) { animation-delay: -3s; }
.sl-orbit-node:nth-child(4) { animation-delay: -6s; }
@keyframes sl-orbit {
  from { transform: rotate(0deg) translateX(110px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(110px) rotate(-360deg); }
}

/* ── 오프라인 노드 ── */
.sl-offline-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sl-offline-card { padding: 28px; }
.sl-offline-card h3 { font-weight: 800; color: #fff; margin: 0 0 10px; font-size: 1rem; }
.sl-offline-card > p { color: var(--sl-muted); font-size: 0.88rem; line-height: 1.6; margin: 0 0 14px; }
.sl-offline-card ul { padding: 0; margin: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.sl-offline-card ul li {
  color: var(--sl-muted); font-size: 0.87rem;
  display: flex; align-items: center; gap: 8px;
}
.sl-offline-card ul li::before { content: '→'; color: var(--sl-neon); font-weight: 700; flex-shrink: 0; }

/* ── 로드맵 ── */
.sl-roadmap { display: flex; flex-direction: column; gap: 0; max-width: 680px; margin: 0 auto; }
.sl-rm-item { display: flex; gap: 22px; }
.sl-rm-line { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 16px; }
.sl-rm-dot {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--sl-blue), var(--sl-neon));
  box-shadow: 0 0 12px rgba(0,212,255,0.55);
}
.sl-rm-connector { width: 2px; flex: 1; min-height: 36px; background: linear-gradient(180deg, rgba(0,212,255,0.28) 0%, rgba(0,212,255,0.04) 100%); }
.sl-rm-item:last-child .sl-rm-connector { display: none; }
.sl-rm-body { padding: 0 0 40px; }
.sl-rm-phase { font-size: 0.72rem; font-weight: 700; color: var(--sl-neon); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 5px; }
.sl-rm-body h3 { font-weight: 800; color: #fff; font-size: 1.02rem; margin: 0 0 5px; }
.sl-rm-body p  { color: var(--sl-muted); font-size: 0.87rem; margin: 0 0 10px; line-height: 1.55; }
.sl-rm-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sl-rm-tag {
  font-size: 0.7rem; padding: 2px 10px; border-radius: 100px;
  background: rgba(0,212,255,0.07); color: var(--sl-dim);
  border: 1px solid rgba(0,212,255,0.12);
}

/* ── Final CTA ── */
.sl-cta-section {
  text-align: center; padding: 120px 24px;
  position: relative; overflow: hidden;
  background: radial-gradient(ellipse 80% 55% at 50% 50%, rgba(0,102,255,0.16) 0%, transparent 70%);
}
.sl-cta-section::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,212,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.035) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 80%);
}
.sl-cta-inner { position: relative; z-index: 1; max-width: 580px; margin: 0 auto; }
.sl-cta-inner h2 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 900; color: #fff; margin: 0 0 14px; line-height: 1.2; }
.sl-cta-inner p  { color: var(--sl-muted); font-size: 1rem; margin: 0 0 36px; line-height: 1.6; }
.sl-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ── Footer ── */
.sl-footer {
  border-top: 1px solid rgba(0,212,255,0.08);
  padding: 40px 24px; text-align: center;
}
.sl-footer-inner { max-width: 1280px; margin: 0 auto; }
.sl-footer-brand {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 800; font-size: 1.05rem; color: #fff; margin-bottom: 8px;
}
.sl-footer-tagline { color: #475569; font-size: 0.83rem; margin-bottom: 20px; }
.sl-footer-links { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.sl-footer-links a { color: #475569; text-decoration: none; font-size: 0.83rem; transition: color 0.2s; }
.sl-footer-links a:hover { color: var(--sl-neon); }
.sl-footer-copy { color: #334155; font-size: 0.78rem; }

/* ── 서브 페이지 공통 ── */
.sl-subpage { padding: 100px 24px 80px; max-width: 1280px; margin: 0 auto; }
.sl-subpage-hero {
  text-align: center; padding: 60px 0 50px;
  border-bottom: 1px solid rgba(0,212,255,0.08);
  margin-bottom: 60px;
}
.sl-subpage-hero h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; color: #fff; margin: 0 0 14px; }
.sl-subpage-hero p { font-size: 1.05rem; color: var(--sl-muted); max-width: 560px; margin: 0 auto; line-height: 1.6; }

/* ── 요금제 카드 ── */
.sl-pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.sl-plan-card { padding: 36px 28px; position: relative; }
.sl-plan-card.featured {
  border-color: rgba(0,212,255,0.5) !important;
  background: rgba(0,212,255,0.06) !important;
  box-shadow: 0 0 40px rgba(0,212,255,0.12);
}
.sl-plan-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--sl-blue), var(--sl-neon));
  color: #000; font-size: 0.72rem; font-weight: 800;
  padding: 4px 14px; border-radius: 100px; white-space: nowrap;
}
.sl-plan-name { font-weight: 800; font-size: 1.05rem; color: var(--sl-muted); margin-bottom: 16px; letter-spacing: 0.04em; text-transform: uppercase; }
.sl-plan-price { margin-bottom: 8px; }
.sl-plan-price .amount { font-size: 2.5rem; font-weight: 900; color: #fff; }
.sl-plan-price .period { font-size: 0.88rem; color: var(--sl-dim); }
.sl-plan-desc { font-size: 0.85rem; color: var(--sl-dim); margin-bottom: 24px; }
.sl-plan-features { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 10px; }
.sl-plan-features li { font-size: 0.88rem; color: var(--sl-muted); display: flex; align-items: center; gap: 8px; }
.sl-plan-features li::before { content: '✓'; color: var(--sl-neon); font-weight: 700; flex-shrink: 0; }
.sl-plan-cta { width: 100%; text-align: center; }

/* ── 반응형 ── */
@media (max-width: 900px) {
  .sl-ai-wrap { grid-template-columns: 1fr; gap: 40px; }
  .sl-ai-visual { display: none; }
}
@media (max-width: 768px) {
  .sl-nav-links { display: none; }
  .sl-problem-split { grid-template-columns: 1fr; }
  .sl-offline-grid  { grid-template-columns: 1fr; }
  .sl-hero-stats    { gap: 24px; }
  .sl-section       { padding: 60px 16px; }
  .sl-subpage       { padding: 80px 16px 60px; }
}
@media (max-width: 480px) {
  .sl-hero-cta { flex-direction: column; align-items: center; }
  .sl-btn.lg, .sl-btn-outline.lg { width: 100%; max-width: 320px; }
}
/* ============================================
   StorePage — App & Content Store (Full)
   ============================================ */

.store-page {
  min-height: 100vh;
  background-color: #FAFBFC;
  font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans KR', 'Segoe UI', 'Roboto', sans-serif;
  color: #1A1A2E;
  padding-bottom: 4rem;
}

/* ── Header ── */
.store-header {
  background: linear-gradient(135deg, #6C5CE7 0%, #a29bfe 100%);
  padding: 2rem 1.5rem 2.5rem;
}

.store-header-inner {
  max-width: 600px;
  margin: 0 auto;
}

.store-header-title-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.3rem;
}

.store-header h1 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
}

.store-header p {
  margin: 0;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
}

/* ── Back button ── */
.store-back-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-bottom: 0.6rem;
  font-family: inherit;
}

.store-back-btn:hover {
  color: #fff;
}

/* ── Search ── */
.store-search-wrap {
  max-width: 600px;
  margin: -1.2rem auto 0;
  padding: 0 1rem;
}

.store-search-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 0.7rem 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.store-search-box input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 0.93rem;
  color: #1A1A2E;
  background: transparent;
  font-family: inherit;
}

.store-search-box input::placeholder {
  color: #999;
}

/* ── Category Tabs (pills) ── */
.store-tabs {
  max-width: 600px;
  margin: 1.2rem auto 0;
  padding: 0 1rem;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.store-tabs::-webkit-scrollbar {
  display: none;
}

.store-tab {
  flex-shrink: 0;
  padding: 0.45rem 1rem;
  border-radius: 20px;
  border: 1.5px solid #E5E7EB;
  background: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.store-tab:hover {
  border-color: #6C5CE7;
  color: #6C5CE7;
}

.store-tab.active {
  background: #6C5CE7;
  border-color: #6C5CE7;
  color: #fff;
}

/* ── Featured Banner ── */
.store-banner-wrap {
  max-width: 600px;
  margin: 1.2rem auto 0;
  padding: 0 1rem;
  position: relative;
}

.store-banner {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  height: 180px;
  cursor: pointer;
  transition: box-shadow 0.25s;
}

.store-banner:hover {
  box-shadow: 0 4px 16px rgba(108, 92, 231, 0.2);
}

.store-banner-bg {
  position: absolute;
  inset: 0;
  border-radius: 16px;
}

.store-banner-content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.3rem;
  color: #fff;
}

.store-banner-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(4px);
  margin-bottom: 0.4rem;
  width: fit-content;
}

.store-banner-content h2 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
}

.store-banner-content p {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  opacity: 0.9;
  line-height: 1.4;
}

.store-banner-cta {
  margin-top: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  border-radius: 8px;
  border: none;
  background: #fff;
  color: #6C5CE7;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  width: fit-content;
  transition: transform 0.15s;
  font-family: inherit;
}

.store-banner-cta:active {
  transform: scale(0.96);
}

/* Banner dots */
.store-banner-dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.7rem;
}

.store-banner-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #D1D5DB;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s;
}

.store-banner-dot.active {
  background: #6C5CE7;
  width: 18px;
  border-radius: 3px;
}

/* ── Section ── */
.store-section {
  max-width: 600px;
  margin: 1.8rem auto 0;
  padding: 0 1rem;
  animation: storeFadeIn 0.35s ease-out both;
}

.store-section:nth-child(2) { animation-delay: 0.05s; }
.store-section:nth-child(3) { animation-delay: 0.1s; }
.store-section:nth-child(4) { animation-delay: 0.15s; }
.store-section:nth-child(5) { animation-delay: 0.2s; }

.store-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.8rem;
}

.store-section-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: #1A1A2E;
  display: flex;
  align-items: center;
}

.store-section-more {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #6C5CE7;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}

.store-section-more:hover {
  text-decoration: underline;
}

/* ── App Cards (horizontal scroll) ── */
.store-app-scroll {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 0.3rem;
}

.store-app-scroll::-webkit-scrollbar {
  display: none;
}

.store-app-card {
  flex-shrink: 0;
  width: 140px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid #E5E7EB;
  padding: 1rem 0.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  transition: box-shadow 0.2s, transform 0.15s;
  cursor: pointer;
}

.store-app-card:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.store-app-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.store-app-card h3 {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
  color: #1A1A2E;
  line-height: 1.3;
}

.store-app-desc {
  font-size: 0.7rem;
  color: #999;
  text-align: center;
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.store-app-meta {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.68rem;
  color: #999;
}

/* ── Install Button ── */
.store-install-btn {
  padding: 0.3rem 0.8rem;
  border-radius: 8px;
  border: 1.5px solid #6C5CE7;
  background: #6C5CE7;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.store-install-btn:hover {
  background: #5a4bd6;
  border-color: #5a4bd6;
}

.store-install-btn:active {
  transform: scale(0.95);
}

.store-install-btn.installed {
  background: #F0F0F0;
  border-color: #F0F0F0;
  color: #999;
  cursor: default;
}

.store-install-btn.installed:hover {
  background: #F0F0F0;
  border-color: #F0F0F0;
}

/* ── Template Grid (2 columns) ── */
.store-template-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.store-template-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #E5E7EB;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.15s;
  cursor: pointer;
}

.store-template-card:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.store-template-preview {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.store-template-preview-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
}

.store-template-info {
  padding: 0.7rem 0.8rem;
}

.store-template-info h3 {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: #1A1A2E;
}

.store-template-author {
  font-size: 0.7rem;
  color: #999;
  margin: 0.15rem 0 0;
}

.store-template-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
}

.store-template-rating {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.store-template-use-btn {
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  border: none;
  background: #6C5CE7;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
  font-family: inherit;
}

.store-template-use-btn:hover {
  background: #5a4bd6;
}

/* ── Content List (vertical) ── */
.store-content-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* ── Price Tags ── */
.store-price-tag {
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
}

.store-price-tag.free {
  background: #E8F8F5;
  color: #00B894;
}

.store-price-tag.paid {
  background: #EFF6FF;
  color: #3B82F6;
}

/* ── Empty State ── */
.store-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: #999;
}

.store-empty-icon {
  margin-bottom: 0.8rem;
  opacity: 0.4;
}

.store-empty h3 {
  margin: 0 0 0.3rem;
  font-size: 1rem;
  font-weight: 700;
  color: #555;
}

.store-empty p {
  margin: 0;
  font-size: 0.85rem;
}

/* ============================================
   StoreItemCard — Detail Card (accordion)
   ============================================ */

.store-detail-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #E5E7EB;
  overflow: hidden;
  transition: box-shadow 0.25s;
}

.store-detail-card:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.store-detail-card.expanded {
  box-shadow: 0 4px 20px rgba(108, 92, 231, 0.12);
  border-color: #C4B5FD;
}

/* Main row */
.store-detail-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 1rem;
  cursor: pointer;
}

.store-detail-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.store-detail-text {
  flex: 1;
  min-width: 0;
}

.store-detail-top-line {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.store-detail-text h3 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #1A1A2E;
}

.store-cat-badge {
  padding: 0.12rem 0.45rem;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 700;
  background: #F3F4F6;
  color: #555;
}

.store-cat-badge.cat-app { background: #EDE9FE; color: #6C5CE7; }
.store-cat-badge.cat-template { background: #D1FAE5; color: #059669; }
.store-cat-badge.cat-content { background: #FCE7F3; color: #DB2777; }

.store-detail-desc-short {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  color: #777;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.store-detail-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.3rem;
}

.store-star-rating {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}

.store-rating-num {
  font-size: 0.7rem;
  font-weight: 600;
  color: #555;
  margin-left: 3px;
}

.store-detail-dl {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.68rem;
  color: #999;
}

.store-detail-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  flex-shrink: 0;
}

/* Toggle arrow */
.store-detail-toggle {
  display: flex;
  justify-content: center;
  padding: 0.3rem 0;
  background: none;
  border: none;
  border-top: 1px solid #F3F4F6;
  width: 100%;
  cursor: pointer;
  color: #999;
  transition: color 0.15s;
}

.store-detail-toggle:hover {
  color: #6C5CE7;
}

/* ── Expanded Section ── */
.store-detail-expanded {
  padding: 0 1rem 1rem;
  animation: storeExpandIn 0.3s ease-out;
}

@keyframes storeExpandIn {
  from { opacity: 0; max-height: 0; }
  to { opacity: 1; max-height: 600px; }
}

.store-detail-full-desc h4,
.store-detail-screenshots h4,
.store-detail-reviews h4 {
  margin: 0.8rem 0 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #1A1A2E;
}

.store-detail-full-desc p {
  margin: 0;
  font-size: 0.82rem;
  color: #555;
  line-height: 1.6;
}

/* Screenshots placeholder */
.store-detail-screenshots {
  margin-top: 0.2rem;
}

.store-screenshots-scroll {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 0.3rem;
}

.store-screenshots-scroll::-webkit-scrollbar {
  display: none;
}

.store-screenshot-placeholder {
  flex-shrink: 0;
  width: 120px;
  height: 80px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Reviews */
.store-detail-reviews {
  margin-top: 0.2rem;
}

.store-no-reviews {
  margin: 0;
  font-size: 0.8rem;
  color: #999;
  font-style: italic;
}

.store-review-item {
  padding: 0.6rem 0;
  border-bottom: 1px solid #F3F4F6;
}

.store-review-item:last-child {
  border-bottom: none;
}

.store-review-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.store-review-author {
  font-size: 0.78rem;
  font-weight: 700;
  color: #1A1A2E;
}

.store-review-item p {
  margin: 0;
  font-size: 0.78rem;
  color: #555;
  line-height: 1.5;
}

/* ── Animations ── */
@keyframes storeFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Responsive ── */
@media (max-width: 400px) {
  .store-app-card {
    width: 125px;
  }

  .store-template-preview {
    height: 80px;
  }

  .store-banner {
    height: 160px;
  }

  .store-detail-row {
    gap: 0.6rem;
    padding: 0.7rem 0.8rem;
  }

  .store-detail-icon {
    width: 48px;
    height: 48px;
  }

  .store-detail-text h3 {
    font-size: 0.84rem;
  }

  .store-screenshot-placeholder {
    width: 100px;
    height: 66px;
  }
}

@media (min-width: 768px) {
  .store-page {
    max-width: 720px;
    margin: 0 auto;
  }

  .store-template-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* ============================================
   TemplateBrowser — Template Browsing & Preview
   ============================================ */

/* ── Container ── */
.tb-container {
  min-height: 100vh;
  background-color: #FAFBFC;
  font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans KR', 'Segoe UI', 'Roboto', sans-serif;
  color: #1A1A2E;
  padding-bottom: 4rem;
}

.tb-container.mode-modal {
  min-height: auto;
  background: transparent;
  padding-bottom: 0;
}

.tb-container.mode-embedded {
  min-height: auto;
  padding-bottom: 1rem;
}

/* ── Header ── */
.tb-header {
  background: linear-gradient(135deg, #6C5CE7 0%, #a29bfe 100%);
  padding: 2rem 1.5rem 2.5rem;
}

.tb-header-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.tb-header-title-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.3rem;
}

.tb-header h1 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
}

.tb-header p {
  margin: 0;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
}

.tb-back-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-bottom: 0.6rem;
  font-family: inherit;
}

.tb-back-btn:hover {
  color: #fff;
}

.mode-modal .tb-header,
.mode-embedded .tb-header {
  display: none;
}

/* ── Search ── */
.tb-search-wrap {
  max-width: 1200px;
  margin: -1.2rem auto 0;
  padding: 0 1rem;
}

.mode-modal .tb-search-wrap,
.mode-embedded .tb-search-wrap {
  margin-top: 0;
  padding: 0;
}

.tb-search-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 0.7rem 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.tb-search-box input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 0.93rem;
  color: #1A1A2E;
  background: transparent;
  font-family: inherit;
}

.tb-search-box input::placeholder {
  color: #999;
}

/* ── Controls Bar (tabs + sort) ── */
.tb-controls {
  max-width: 1200px;
  margin: 1rem auto 0;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.mode-modal .tb-controls,
.mode-embedded .tb-controls {
  padding: 0;
  margin-top: 0.75rem;
}

/* ── Category Tabs ── */
.tb-tabs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}

.tb-tabs::-webkit-scrollbar {
  display: none;
}

.tb-tab {
  flex-shrink: 0;
  padding: 0.45rem 1rem;
  border-radius: 20px;
  border: 1.5px solid #E5E7EB;
  background: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.tb-tab:hover {
  border-color: #6C5CE7;
  color: #6C5CE7;
}

.tb-tab.active {
  background: #6C5CE7;
  border-color: #6C5CE7;
  color: #fff;
}

/* ── Sort Dropdown ── */
.tb-sort {
  flex-shrink: 0;
}

.tb-sort select {
  padding: 0.45rem 0.8rem;
  border-radius: 10px;
  border: 1.5px solid #E5E7EB;
  background: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  font-family: inherit;
  outline: none;
  appearance: auto;
}

.tb-sort select:focus {
  border-color: #6C5CE7;
}

/* ── Template Grid ── */
.tb-grid {
  max-width: 1200px;
  margin: 1.2rem auto 0;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  animation: tbFadeIn 0.35s ease-out both;
}

.mode-modal .tb-grid,
.mode-embedded .tb-grid {
  padding: 0;
  margin-top: 1rem;
}

/* ── Template Card ── */
.tb-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #E5E7EB;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.15s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.tb-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.tb-card.featured {
  border-color: #F59E0B;
  box-shadow: 0 0 0 1px #F59E0B;
}

.tb-card.featured:hover {
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.2);
}

/* Card Thumbnail */
.tb-card-thumb {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.tb-card-thumb-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem 0.8rem 0.7rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.55));
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.3;
}

.tb-card-thumb-icon {
  font-size: 48px;
  opacity: 0.5;
}

/* Featured badge */
.tb-featured-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  font-size: 0.65rem;
  font-weight: 700;
  background: #F59E0B;
  color: #fff;
  z-index: 1;
}

/* Price badge */
.tb-price-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  z-index: 1;
}

.tb-price-badge.free {
  background: #E8F8F5;
  color: #00B894;
}

.tb-price-badge.paid {
  background: #EFF6FF;
  color: #3B82F6;
}

/* Premium lock overlay */
.tb-lock-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.tb-lock-icon {
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

/* Card Info */
.tb-card-info {
  padding: 0.7rem 0.8rem 0.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tb-card-name {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: #1A1A2E;
  line-height: 1.3;
}

.tb-card-author {
  margin: 0.15rem 0 0;
  font-size: 0.72rem;
  color: #999;
}

/* Rating + Downloads row */
.tb-card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.tb-card-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}

.tb-card-rating-num {
  font-size: 0.7rem;
  font-weight: 600;
  color: #555;
  margin-left: 3px;
}

.tb-card-downloads {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.68rem;
  color: #999;
}

/* Card Actions */
.tb-card-actions {
  display: flex;
  gap: 0.4rem;
  padding: 0 0.8rem 0.7rem;
}

.tb-btn-apply {
  flex: 1;
  padding: 0.4rem 0;
  border-radius: 8px;
  border: none;
  background: #6C5CE7;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  font-family: inherit;
}

.tb-btn-apply:hover {
  background: #5a4bd6;
}

.tb-btn-apply:active {
  transform: scale(0.96);
}

.tb-btn-fork {
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  border: 1.5px solid #E5E7EB;
  background: #fff;
  color: #555;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}

.tb-btn-fork:hover {
  border-color: #6C5CE7;
  color: #6C5CE7;
}

.tb-btn-preview {
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #999;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s;
  font-family: inherit;
}

.tb-btn-preview:hover {
  color: #6C5CE7;
}

/* ── Empty State ── */
.tb-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: #999;
  max-width: 1200px;
  margin: 0 auto;
}

.tb-empty-icon {
  margin-bottom: 0.8rem;
  opacity: 0.4;
}

.tb-empty h3 {
  margin: 0 0 0.3rem;
  font-size: 1rem;
  font-weight: 700;
  color: #555;
}

.tb-empty p {
  margin: 0;
  font-size: 0.85rem;
}

/* ── Load More ── */
.tb-load-more {
  max-width: 1200px;
  margin: 1.5rem auto 0;
  padding: 0 1rem;
  text-align: center;
}

.tb-load-more-btn {
  padding: 0.6rem 2rem;
  border-radius: 10px;
  border: 1.5px solid #E5E7EB;
  background: #fff;
  color: #555;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.tb-load-more-btn:hover {
  border-color: #6C5CE7;
  color: #6C5CE7;
}

.tb-load-more-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ── Loading Spinner ── */
.tb-loading {
  text-align: center;
  padding: 3rem 0;
}

.tb-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #E5E7EB;
  border-top-color: #6C5CE7;
  border-radius: 50%;
  animation: tbSpin 0.8s linear infinite;
  margin: 0 auto 0.5rem;
}

/* ============================================
   TemplatePreview — Full-screen Modal
   ============================================ */

.tp-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: tpFadeIn 0.25s ease-out;
  padding: 1rem;
}

.tp-modal {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  animation: tpSlideUp 0.3s ease-out;
  position: relative;
}

.tp-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.08);
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}

.tp-close-btn:hover {
  background: rgba(0,0,0,0.15);
}

/* Preview area */
.tp-preview-area {
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
}

.tp-preview-blocks {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 200px;
}

.tp-preview-block {
  height: 12px;
  border-radius: 6px;
  background: rgba(255,255,255,0.35);
}

.tp-preview-block.wide { width: 100%; }
.tp-preview-block.med { width: 75%; }
.tp-preview-block.short { width: 50%; }

.tp-preview-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  margin-bottom: 0.8rem;
}

/* Details */
.tp-details {
  padding: 1.2rem 1.4rem;
}

.tp-name {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: #1A1A2E;
}

.tp-author {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  color: #999;
}

.tp-desc {
  margin: 0.8rem 0 0;
  font-size: 0.88rem;
  color: #555;
  line-height: 1.6;
}

.tp-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.8rem;
  flex-wrap: wrap;
}

.tp-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: #555;
}

.tp-meta-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}

/* Tags */
.tp-tags {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.8rem;
}

.tp-tag {
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  background: #F3F4F6;
  color: #555;
}

/* Action buttons */
.tp-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.2rem;
  padding-bottom: 0.5rem;
}

.tp-btn-primary {
  flex: 1;
  padding: 0.65rem 0;
  border-radius: 10px;
  border: none;
  background: #6C5CE7;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  font-family: inherit;
}

.tp-btn-primary:hover {
  background: #5a4bd6;
}

.tp-btn-primary:active {
  transform: scale(0.97);
}

.tp-btn-secondary {
  padding: 0.65rem 1rem;
  border-radius: 10px;
  border: 1.5px solid #E5E7EB;
  background: #fff;
  color: #555;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}

.tp-btn-secondary:hover {
  border-color: #6C5CE7;
  color: #6C5CE7;
}

.tp-btn-ghost {
  padding: 0.65rem 1rem;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: #999;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s;
  font-family: inherit;
}

.tp-btn-ghost:hover {
  color: #6C5CE7;
}

/* Reviews section */
.tp-reviews {
  margin-top: 1rem;
  border-top: 1px solid #F3F4F6;
  padding-top: 0.8rem;
}

.tp-reviews h4 {
  margin: 0 0 0.5rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: #1A1A2E;
}

.tp-review-item {
  padding: 0.5rem 0;
  border-bottom: 1px solid #F3F4F6;
}

.tp-review-item:last-child {
  border-bottom: none;
}

.tp-review-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
}

.tp-review-author {
  font-size: 0.78rem;
  font-weight: 700;
  color: #1A1A2E;
}

.tp-review-text {
  margin: 0;
  font-size: 0.78rem;
  color: #555;
  line-height: 1.5;
}

.tp-no-reviews {
  font-size: 0.82rem;
  color: #999;
  font-style: italic;
}

/* ── Animations ── */
@keyframes tbFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes tbSpin {
  to { transform: rotate(360deg); }
}

@keyframes tpFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes tpSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ── */

/* Mobile small */
@media (max-width: 400px) {
  .tb-card-thumb {
    height: 160px;
  }

  .tb-card-actions {
    flex-wrap: wrap;
  }

  .tp-preview-area {
    height: 220px;
  }
}

/* Tablet: 3 columns */
@media (min-width: 640px) {
  .tb-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .tb-card-thumb {
    height: 190px;
  }
}

/* Desktop: 4 columns */
@media (min-width: 1024px) {
  .tb-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .tb-card-thumb {
    height: 200px;
  }

  .tp-modal {
    max-width: 640px;
  }
}

/* Wide desktop */
@media (min-width: 1280px) {
  .tb-grid {
    max-width: 1400px;
  }

  .tb-controls {
    max-width: 1400px;
  }

  .tb-search-wrap {
    max-width: 1400px;
  }
}
/* ===========================
   SUBSCRIPTION PAGE
   accent: #6C5CE7 (purple)
   =========================== */

.sub-page {
  --sub-primary: #6C5CE7;
  --sub-primary-light: #A29BFE;
  --sub-primary-dark: #5A4BD1;
  --sub-accent: #00CEC9;
  --sub-bg: #F8F9FB;
  --sub-bg-card: #FFFFFF;
  --sub-text: #1A1A2E;
  --sub-text-secondary: #555;
  --sub-text-muted: #999;
  --sub-border: #E5E7EB;
  --sub-success: #00B894;
  --sub-danger: #FF7675;
  --sub-radius: 16px;
  --sub-container: 1100px;
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--sub-bg);
  color: var(--sub-text);
  font-family: 'Noto Sans KR', 'Inter', -apple-system, sans-serif;
}

.sub-container {
  max-width: var(--sub-container);
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Header ── */
.sub-header {
  padding: 48px 0 32px;
  text-align: center;
}
.sub-header-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sub-text-secondary);
  text-decoration: none;
  margin-bottom: 20px;
  cursor: pointer;
  border: none;
  background: none;
  transition: color 0.2s;
}
.sub-header-back:hover { color: var(--sub-primary); }
.sub-header h1 {
  font-size: 28px;
  font-weight: 800;
  margin: 0 0 8px;
}
.sub-header p {
  font-size: 15px;
  color: var(--sub-text-secondary);
  margin: 0;
}
.sub-current-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--sub-primary), var(--sub-primary-light));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 20px;
  margin-top: 12px;
}

/* ── Billing Toggle ── */
.sub-billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sub-text-muted);
}
.sub-billing-toggle span.active {
  color: var(--sub-text);
}
.sub-toggle-switch {
  position: relative;
  width: 48px;
  height: 26px;
  border-radius: 13px;
  border: none;
  background: #D1D5DB;
  cursor: pointer;
  transition: background 0.25s;
  padding: 0;
}
.sub-toggle-switch.on {
  background: var(--sub-primary);
}
.sub-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform 0.25s;
}
.sub-toggle-switch.on .sub-toggle-thumb {
  transform: translateX(22px);
}
.sub-discount-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--sub-primary), var(--sub-primary-light));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
  margin-left: 4px;
}

/* ── Section Titles ── */
.sub-section {
  margin-bottom: 48px;
}
.sub-section-title {
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 6px;
  color: var(--sub-text);
}
.sub-section-subtitle {
  font-size: 14px;
  color: var(--sub-text-muted);
  margin: 0 0 24px;
}

/* ── Plan Cards Grid ── */
.sub-plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.sub-plan-card {
  background: var(--sub-bg-card);
  border-radius: var(--sub-radius);
  border: 2px solid var(--sub-border);
  padding: 28px 24px;
  position: relative;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
}
.sub-plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(108, 92, 231, 0.12);
}
.sub-plan-card.highlighted {
  border-color: var(--sub-primary);
  box-shadow: 0 8px 32px rgba(108, 92, 231, 0.15);
}
.sub-plan-card.highlighted::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--sub-primary), var(--sub-primary-light));
  border-radius: var(--sub-radius) var(--sub-radius) 0 0;
}

/* Plan badge */
.sub-plan-badge {
  position: absolute;
  top: -10px;
  right: 16px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 10px;
  color: #fff;
}
.sub-plan-badge.blue {
  background: #3B82F6;
}
.sub-plan-badge.purple {
  background: linear-gradient(135deg, var(--sub-primary), var(--sub-primary-light));
}

/* Plan name + price */
.sub-plan-name {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 4px;
}
.sub-plan-price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 20px;
}
.sub-plan-amount {
  font-size: 32px;
  font-weight: 900;
  color: var(--sub-primary);
}
.sub-plan-period {
  font-size: 14px;
  color: var(--sub-text-muted);
}

/* Feature list */
.sub-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  flex: 1;
}
.sub-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  padding: 6px 0;
  color: var(--sub-text-secondary);
}
.sub-features li .feat-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sub-features li .feat-icon.included { color: var(--sub-success); }
.sub-features li .feat-icon.excluded { color: #D1D5DB; }

/* CTA button */
.sub-plan-cta {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  border: none;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}
.sub-plan-cta.primary {
  background: linear-gradient(135deg, var(--sub-primary), var(--sub-primary-light));
  color: #fff;
}
.sub-plan-cta.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(108, 92, 231, 0.3);
}
.sub-plan-cta.secondary {
  background: var(--sub-bg);
  color: var(--sub-text-secondary);
  border: 1px solid var(--sub-border);
}
.sub-plan-cta.disabled {
  background: #F3F4F6;
  color: #9CA3AF;
  cursor: default;
  pointer-events: none;
}

/* ── Creator Addon Cards ── */
.sub-addon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.sub-addon-card {
  background: var(--sub-bg-card);
  border-radius: var(--sub-radius);
  border: 1px solid var(--sub-border);
  padding: 24px;
  transition: all 0.25s;
  display: flex;
  flex-direction: column;
}
.sub-addon-card:hover {
  border-color: var(--sub-primary-light);
  box-shadow: 0 8px 24px rgba(108, 92, 231, 0.1);
}
.sub-addon-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.sub-addon-name {
  font-size: 16px;
  font-weight: 700;
}
.sub-addon-price-tag {
  font-size: 14px;
  font-weight: 800;
  color: var(--sub-primary);
}
.sub-addon-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  flex: 1;
}
.sub-addon-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 5px 0;
  color: var(--sub-text-secondary);
}
.sub-addon-cta {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--sub-primary);
  background: transparent;
  color: var(--sub-primary);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.sub-addon-cta:hover {
  background: var(--sub-primary);
  color: #fff;
}

/* ── App Subscriptions ── */
.sub-app-table {
  background: var(--sub-bg-card);
  border-radius: var(--sub-radius);
  border: 1px solid var(--sub-border);
  overflow: hidden;
}
.sub-app-row {
  display: grid;
  grid-template-columns: 200px repeat(3, 1fr);
  align-items: center;
  padding: 0;
  border-bottom: 1px solid var(--sub-border);
}
.sub-app-row:last-child { border-bottom: none; }
.sub-app-row.header {
  background: #F9FAFB;
  font-weight: 700;
  font-size: 13px;
  color: var(--sub-text-muted);
}
.sub-app-cell {
  padding: 16px 20px;
  font-size: 14px;
}
.sub-app-cell.app-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--sub-text);
}
.sub-app-cell.app-name .app-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.sub-app-plan {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sub-app-plan-name {
  font-weight: 600;
  font-size: 13px;
}
.sub-app-plan-price {
  font-size: 13px;
  color: var(--sub-text-muted);
}

/* ── FAQ ── */
.sub-faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sub-faq-item {
  background: var(--sub-bg-card);
  border-radius: 12px;
  border: 1px solid var(--sub-border);
  overflow: hidden;
  transition: border-color 0.2s;
}
.sub-faq-item.open {
  border-color: var(--sub-primary-light);
}
.sub-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: var(--sub-text);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  transition: color 0.2s;
}
.sub-faq-q:hover { color: var(--sub-primary); }
.sub-faq-q svg {
  flex-shrink: 0;
  transition: transform 0.25s;
}
.sub-faq-item.open .sub-faq-q svg {
  transform: rotate(180deg);
}
.sub-faq-a {
  padding: 0 20px 18px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--sub-text-secondary);
}

/* ── Footer CTA ── */
.sub-footer-cta {
  text-align: center;
  padding: 48px 0 64px;
}
.sub-footer-cta p {
  font-size: 14px;
  color: var(--sub-text-muted);
  margin: 0 0 16px;
}
.sub-footer-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--sub-primary), var(--sub-primary-light));
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.sub-footer-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(108, 92, 231, 0.3);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .sub-plans-grid,
  .sub-addon-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .sub-plan-card.highlighted {
    order: -1;
  }
  .sub-app-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .sub-app-row.header {
    display: none;
  }
  .sub-app-row {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  .sub-app-cell {
    padding: 0;
  }
  .sub-app-plans-mobile {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
  }
  .sub-app-plan-mobile {
    background: var(--sub-bg);
    border-radius: 10px;
    padding: 10px 12px;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .sub-header h1 { font-size: 22px; }
  .sub-plan-amount { font-size: 26px; }
  .sub-plan-card { padding: 24px 20px; }
  .sub-section-title { font-size: 18px; }
  .sub-app-plans-mobile {
    grid-template-columns: 1fr;
  }
}
/* ── WeLink Site — 다크 테마 (.welink-site 스코프) ── */
.welink-site {
  --bg: #09121d;
  --bg2: #0f1d2d;
  --card: rgba(255,255,255,.06);
  --line: rgba(255,255,255,.12);
  --text: #eff6ff;
  --muted: #a9bdd2;
  --green: #7ef0bc;
  --blue: #76b9ff;
  --violet: #a48bff;
  --gold: #ffd76a;
  --shadow: 0 18px 54px rgba(0,0,0,.35);
  --max: 1180px;
  --radius: 24px;

  color: var(--text);
  background:
    radial-gradient(circle at 10% 10%, rgba(126,240,188,.14), transparent 24%),
    radial-gradient(circle at 90% 0%, rgba(118,185,255,.13), transparent 24%),
    linear-gradient(180deg, #08111a, #0a1523 40%, #09111a 100%);
  font-family: Inter, Pretendard, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  min-height: 100vh;
}
.welink-site *, .welink-site *::before, .welink-site *::after { box-sizing: border-box; }
.welink-site a { text-decoration: none; color: inherit; }
.welink-site img { display: block; max-width: 100%; }

/* ── Container ── */
.welink-site .wl-container { width: min(calc(100% - 32px), var(--max)); margin: 0 auto; }

/* ── Nav ── */
.welink-site .wl-nav { position: sticky; top: 0; z-index: 10; background: rgba(8,17,26,.72); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,.07); }
.welink-site .wl-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 74px; }
.welink-site .wl-nav-links { display: flex; gap: 18px; flex-wrap: wrap; }
.welink-site .wl-nav-links a { color: var(--muted); font-size: 14px; transition: color .2s; }
.welink-site .wl-nav-links a:hover { color: var(--green); }
.welink-site .wl-brand { display: flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: .02em; }
.welink-site .wl-brand-mark { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, var(--green), var(--blue)); color: #061018; box-shadow: 0 10px 28px rgba(118,185,255,.25); font-weight: 900; font-size: 18px; }
.welink-site .wl-accent { color: var(--green); }

/* ── Buttons ── */
.welink-site .wl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 20px; border-radius: 14px; font-weight: 700; border: 1px solid transparent; cursor: pointer; font-size: 14px; transition: all .2s; }
.welink-site .wl-btn.primary { background: linear-gradient(135deg, var(--green), #8af5ff); color: #071018; }
.welink-site .wl-btn.primary:hover { box-shadow: 0 6px 24px rgba(126,240,188,.35); }
.welink-site .wl-btn.secondary { background: rgba(255,255,255,.03); border-color: var(--line); color: var(--text); }
.welink-site .wl-btn.secondary:hover { background: rgba(255,255,255,.08); }

/* ── Hero ── */
.welink-site .wl-hero { padding: 34px 0 90px; min-height: 92svh; display: flex; align-items: center; }
.welink-site .wl-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: center; }
.welink-site .wl-badge { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.04); color: var(--green); font-size: 13px; }
.welink-site .wl-hero-copy { display: grid; gap: 18px; }
.welink-site .wl-hero-copy h1 { margin: 0 0 14px; line-height: 1.12; font-size: clamp(40px,6vw,72px); letter-spacing: -.04em; }
.welink-site .wl-hero-copy .wl-lead { font-size: clamp(17px,2vw,21px); color: var(--muted); line-height: 1.75; margin: 0; }
.welink-site .wl-hero-points { display: grid; gap: 12px; }
.welink-site .wl-point { padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.04); color: var(--muted); line-height: 1.75; }
.welink-site .wl-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Hero Panel ── */
.welink-site .wl-hero-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: blur(12px); padding: 26px; display: grid; gap: 18px; }
.welink-site .wl-mini-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.welink-site .wl-kpi { padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255,255,255,.04); text-align: center; }
.welink-site .wl-kpi strong { display: block; font-size: 26px; color: white; }
.welink-site .wl-kpi span { font-size: 12px; color: var(--muted); }

/* ── Compare ── */
.welink-site .wl-compare { display: grid; gap: 14px; }
.welink-site .wl-compare-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
.welink-site .wl-old, .welink-site .wl-new { padding: 18px; border-radius: 18px; text-align: center; }
.welink-site .wl-old { background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--muted); }
.welink-site .wl-new { background: rgba(126,240,188,.08); border: 1px solid rgba(126,240,188,.26); }
.welink-site .wl-arrow { font-size: 22px; color: var(--green); }

/* ── Sections ── */
.welink-site .wl-section { padding: 88px 0; }
.welink-site .wl-section.alt { background: rgba(0,0,0,.15); }
.welink-site .wl-section-head { display: flex; justify-content: space-between; gap: 16px; align-items: end; margin-bottom: 28px; flex-wrap: wrap; }
.welink-site .wl-kicker { font-size: 13px; color: var(--green); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }

/* ── Typography ── */
.welink-site h1, .welink-site h2, .welink-site h3 { margin: 0 0 14px; line-height: 1.12; }
.welink-site h2 { font-size: clamp(30px,4.4vw,48px); letter-spacing: -.03em; }
.welink-site h3 { font-size: clamp(20px,2.5vw,28px); }
.welink-site p { margin: 0; color: var(--muted); line-height: 1.75; }
.welink-site .wl-lead { font-size: clamp(17px,2vw,21px); }
.welink-site .wl-note { font-size: 13px; color: var(--muted); }

/* ── Grid ── */
.welink-site .wl-grid { display: grid; gap: 22px; }
.welink-site .wl-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.welink-site .wl-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }

/* ── Card ── */
.welink-site .wl-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: blur(12px); padding: 24px; transition: transform .2s, box-shadow .2s; }
.welink-site a.wl-card:hover { transform: translateY(-4px); box-shadow: 0 24px 64px rgba(0,0,0,.45); }
.welink-site .wl-card h3 small { display: block; font-size: 13px; color: var(--green); margin-bottom: 8px; }
.welink-site .wl-icon { font-size: 30px; margin-bottom: 12px; }
.welink-site .wl-pill-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.welink-site .wl-pill { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 12px; color: var(--green); transition: background .2s; }
.welink-site a.wl-pill:hover { background: rgba(126,240,188,.12); }

/* ── Timeline ── */
.welink-site .wl-timeline { display: grid; gap: 14px; }
.welink-site .wl-time-item { display: grid; grid-template-columns: 62px 1fr; gap: 14px; align-items: start; padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255,255,255,.04); }
.welink-site .wl-time-no { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(126,240,188,.22), rgba(118,185,255,.22)); font-weight: 800; }

/* ── Flow Strip ── */
.welink-site .wl-flow-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.welink-site .wl-flow-step { padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255,255,255,.04); }
.welink-site .wl-flow-step strong { display: block; font-size: 13px; color: var(--green); margin-bottom: 6px; }

/* ── CTA ── */
.welink-site .wl-cta-box { padding: 32px; border-radius: 28px; border: 1px solid rgba(126,240,188,.25); background: linear-gradient(135deg, rgba(126,240,188,.12), rgba(118,185,255,.09)); display: grid; gap: 16px; text-align: center; }

/* ── Sub Hero ── */
.welink-site .wl-sub-hero { padding: 82px 0 30px; }
.welink-site .wl-breadcrumb { display: flex; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: 14px; margin-bottom: 14px; }
.welink-site .wl-breadcrumb a { color: var(--green); }

/* ── List ── */
.welink-site .wl-list { display: grid; gap: 10px; margin: 0; padding-left: 18px; color: var(--muted); }
.welink-site .wl-list li { line-height: 1.75; }

/* ── Footer ── */
.welink-site .wl-footer { padding: 36px 0 68px; border-top: 1px solid rgba(255,255,255,.08); }
.welink-site .wl-footer-inner { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.welink-site .wl-foot-links { display: grid; gap: 10px; }
.welink-site .wl-foot-copy { max-width: 560px; }

/* ── Responsive ── */
@media (max-width: 980px) {
  .welink-site .wl-hero-grid,
  .welink-site .wl-grid-2,
  .welink-site .wl-grid-3,
  .welink-site .wl-flow-strip,
  .welink-site .wl-mini-kpis { grid-template-columns: 1fr; }
  .welink-site .wl-nav-links { display: none; }
  .welink-site .wl-hero { min-height: auto; }
  .welink-site .wl-compare-row { grid-template-columns: 1fr; }
  .welink-site .wl-arrow { display: none; }
}