/* ─────────────────────────────────────────────────────────────
   AutoPost Design System — 2026 Renewal
   Tone: Trusted but Warm
   Palette: 보라 #7C3AED · 앰버 #F59E0B · 크림 #FAFAF7 · 잉크 #1F2330
   ───────────────────────────────────────────────────────────── */

/* ── 한국어 본문 기본 자간/줄높이 ─────────────────────────────── */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
body {
  font-feature-settings: "ss01", "kern" 1, "calt" 1;
}

/* ── 한국어용 헤딩 클래스 (Tailwind 토큰 보조) ────────────────── */
.h-display { font-family: 'Plus Jakarta Sans', 'Pretendard Variable', sans-serif; font-weight: 800; letter-spacing: -0.045em; line-height: 1.05; }
.h-h1 { font-weight: 800; letter-spacing: -0.035em; line-height: 1.12; }
.h-h2 { font-weight: 700; letter-spacing: -0.030em; line-height: 1.20; }
.h-h3 { font-weight: 700; letter-spacing: -0.025em; line-height: 1.30; }
.lead { font-weight: 500; letter-spacing: -0.015em; line-height: 1.65; color: #4B5563; }

/* ── Animation ───────────────────────────────────────────────── */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.animate-fade-in-up { animation: fade-in-up .7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.animate-fade-in    { animation: fade-in .5s ease-out both; }
.animate-float      { animation: float-soft 6s ease-in-out infinite; }
.delay-100 { animation-delay: .1s; }
.delay-200 { animation-delay: .2s; }
.delay-300 { animation-delay: .3s; }
.delay-400 { animation-delay: .4s; }
.delay-500 { animation-delay: .5s; }

/* ── 브랜드 그라디언트 텍스트 (보라 → 앰버 살짝) ─────────────── */
.gradient-text {
  background: linear-gradient(135deg, #7C3AED 0%, #8B5CF6 50%, #EC4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gradient-text-warm {
  background: linear-gradient(135deg, #7C3AED 0%, #F59E0B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── 워드마크 (헤더 로고) ──────────────────────────────────── */
.brand-wordmark {
  font-family: 'Plus Jakarta Sans', 'Pretendard Variable', 'Pretendard', sans-serif;
  font-weight: 800;
  letter-spacing: -0.045em;
  background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 60%, #EC4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  display: inline-block;
}
.brand-wordmark:hover { opacity: 0.9; }

/* ── 기본 CTA 버튼 (보라 그라디언트) ─────────────────────────── */
.btn-gradient {
  background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
  color: #fff;
  box-shadow: 0 12px 32px -12px rgba(124, 58, 237, .50);
  transition: all .2s ease;
}
.btn-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px -14px rgba(124, 58, 237, .60);
}

/* ── 보조 CTA 버튼 (앰버 — 따뜻한 강조) ───────────────────── */
.btn-amber {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  color: #fff;
  box-shadow: 0 12px 32px -12px rgba(245, 158, 11, .50);
  transition: all .2s ease;
}
.btn-amber:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px -14px rgba(245, 158, 11, .60);
}

/* ── Outline 버튼 (구분 강조) ─────────────────────────────── */
.btn-outline {
  background: #fff;
  color: #1F2330;
  border: 1.5px solid #E7E5DC;
  transition: all .2s ease;
}
.btn-outline:hover {
  border-color: #7C3AED;
  color: #6D28D9;
  background: #FAFAF7;
}

/* ── 카드 ───────────────────────────────────────────────── */
.card {
  background: #fff;
  border: 1px solid #E7E5DC;
  border-radius: 1.25rem;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card-hover {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 60px -28px rgba(124, 58, 237, .25);
  border-color: rgba(124, 58, 237, .30);
}

/* ── 네비 (불투명 화이트) ──────────────────────────────────── */
.nav-blur {
  background-color: rgba(255, 255, 255, 0.92) !important;
  background-image: none !important;
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  box-shadow: 0 1px 2px rgba(15, 19, 36, .04);
}

/* ── 도트 그리드 배경 ─────────────────────────────────────── */
.dot-grid {
  background-image: radial-gradient(circle, rgba(124, 58, 237, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ── Hero 따뜻한 그라디언트 (보라 × 앰버 × 크림) ───────────── */
.hero-bg {
  background:
    radial-gradient(1200px 600px at 15% -5%,  rgba(124, 58, 237, 0.14), transparent 60%),
    radial-gradient(900px 500px at 95% 0%,    rgba(245, 158, 11, 0.10), transparent 60%),
    radial-gradient(800px 400px at 50% 100%,  rgba(236, 72, 153, 0.06), transparent 60%),
    linear-gradient(180deg, #FAFAF7 0%, #FFFFFF 100%);
}

/* ── 컴팩트한 보라 톤 빈 섹션 배경 ────────────────────────── */
.section-cream { background: #FAFAF7; }
.section-soft  { background: #F5F4EE; }

/* ── 가이드 스텝 (1, 2, 3 …) ──────────────────────────────── */
.guide-step {
  counter-increment: step;
  position: relative;
  padding-left: 4rem;
}
.guide-step::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -2px;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, #7C3AED, #6D28D9);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px -6px rgba(124, 58, 237, .45);
}
.steps-container { counter-reset: step; }

/* ── 섹션 디바이더 ─────────────────────────────────────── */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124, 58, 237, .14), transparent);
}

/* ── 코드 블록 ────────────────────────────────────────── */
.code-block {
  background: #1F2330;
  color: #cbd5e1;
  border-radius: 12px;
  padding: 14px 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  overflow-x: auto;
  word-break: break-all;
}

/* ── 인풋 포커스 ───────────────────────────────────────── */
.input-field {
  transition: all .15s ease;
}
.input-field:focus {
  border-color: #7C3AED;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, .14);
}

/* ── 강조 형광 마커 (앰버) ──────────────────────────────── */
.mark-amber {
  background: linear-gradient(180deg, transparent 60%, rgba(245, 158, 11, .35) 60%);
  padding: 0 .12em;
}
.mark-brand {
  background: linear-gradient(180deg, transparent 60%, rgba(124, 58, 237, .22) 60%);
  padding: 0 .12em;
}

/* ── 배지 ──────────────────────────────────────────────── */
.badge-brand {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 9999px;
  background: rgba(124, 58, 237, .08);
  color: #6D28D9;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: 1px solid rgba(124, 58, 237, .14);
}
.badge-amber {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 9999px;
  background: rgba(245, 158, 11, .12);
  color: #B45309;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: 1px solid rgba(245, 158, 11, .25);
}

[x-cloak] { display: none !important; }

/* ─────────────────────────────────────────────────────────────
   플랫폼별 콘텐츠 미리보기 스킨
   ─────────────────────────────────────────────────────────────
   각 SNS 게시물이 실제로 보이는 모양과 최대한 비슷하게 렌더링.
   실제 플랫폼의 정확한 시각적 재현은 아니며 "느낌 프리뷰" 용도. */

.preview-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 24px -8px rgba(15, 23, 42, .12);
}

/* ── Threads 스킨 ───────────────────────────────────────────── */
.skin-threads {
  background: #fff;
  color: #0f172a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px 18px 8px 18px;
  max-width: 560px;
  margin: 0 auto;
}
.skin-threads .th-head { display:flex; align-items:center; gap:10px; }
.skin-threads .th-avatar {
  width: 36px; height: 36px; border-radius: 9999px;
  background: #0f172a; color:#fff; font-weight: 700; font-size: 14px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden;
}
.skin-threads .th-user { font-weight: 600; font-size: 15px; color:#0f172a; }
.skin-threads .th-time { color:#64748b; font-size: 13px; margin-left: 8px; }
.skin-threads .th-body { margin-top: 10px; font-size: 15px; line-height: 1.55; white-space: pre-wrap; word-break: keep-all; color:#0f172a; }
.skin-threads .th-actions { margin-top: 12px; display:flex; gap: 18px; color:#64748b; padding-top: 10px; border-top: 1px solid #f1f5f9; }
.skin-threads .th-actions svg { width: 20px; height: 20px; stroke-width: 1.8; }

/* ── X (Twitter) 스킨 ──────────────────────────────────────── */
.skin-x {
  background: #fff;
  color: #0f1419;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  border: 1px solid #eff3f4;
  border-radius: 16px;
  padding: 14px 16px 10px 16px;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  gap: 12px;
}
.skin-x .x-avatar {
  width: 40px; height: 40px; border-radius: 9999px; flex-shrink: 0;
  background: linear-gradient(135deg, #1d9bf0, #6366f1);
  color: #fff; font-weight: 700; font-size: 14px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.skin-x .x-col { flex: 1; min-width: 0; }
.skin-x .x-head { display:flex; align-items:center; gap: 4px; color:#536471; font-size: 15px; flex-wrap: wrap; }
.skin-x .x-name { color:#0f1419; font-weight: 700; }
.skin-x .x-verified { color:#1d9bf0; width:16px; height:16px; display:inline-block; }
.skin-x .x-handle { color:#536471; }
.skin-x .x-dot { color:#536471; }
.skin-x .x-body { margin-top: 4px; font-size: 15px; line-height: 1.4; white-space: pre-wrap; word-break: keep-all; color:#0f1419; }
.skin-x .x-body .hashtag, .skin-x .x-body .mention, .skin-x .x-body a { color:#1d9bf0; text-decoration: none; }
.skin-x .x-actions { margin-top: 12px; display:flex; justify-content: space-between; max-width: 425px; color:#536471; }
.skin-x .x-actions svg { width: 18px; height: 18px; stroke-width: 1.8; }
.skin-x .x-actions > div { display:flex; align-items:center; gap: 6px; font-size: 13px; }

/* ── Instagram 스킨 ──────────────────────────────────────── */
.skin-ig {
  background: #fff;
  color: #262626;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  border: 1px solid #dbdbdb;
  border-radius: 8px;
  max-width: 470px;
  margin: 0 auto;
  overflow: hidden;
}
.skin-ig .ig-head { display:flex; align-items:center; gap:10px; padding: 10px 14px; border-bottom: 1px solid #efefef; }
.skin-ig .ig-avatar {
  width: 32px; height: 32px; border-radius: 9999px;
  padding: 2px;
  background: linear-gradient(135deg, #f58529 0%, #dd2a7b 50%, #8134af 100%);
  flex-shrink: 0;
}
.skin-ig .ig-avatar > span {
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; border-radius:9999px;
  background: #fff; color:#262626; font-weight:700; font-size: 13px;
  border: 2px solid #fff;
}
.skin-ig .ig-user { font-weight: 600; font-size: 14px; flex: 1; }
.skin-ig .ig-image-wrap { position: relative; aspect-ratio: 1/1; background: #fafafa; }
.skin-ig .ig-image-wrap img { width:100%; height:100%; object-fit: cover; display:block; }
.skin-ig .ig-image-wrap .ig-empty {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  color:#a1a1a1; font-size:13px; text-align:center; padding: 20px;
  background: repeating-linear-gradient(45deg, #f5f5f5 0 10px, #fafafa 10px 20px);
}
.skin-ig .ig-actions { display:flex; align-items:center; gap: 14px; padding: 8px 14px 4px; }
.skin-ig .ig-actions svg { width: 24px; height: 24px; stroke-width: 1.6; }
.skin-ig .ig-actions .spacer { flex: 1; }
.skin-ig .ig-likes { padding: 0 14px; font-weight: 600; font-size: 14px; }
.skin-ig .ig-caption { padding: 4px 14px 14px; font-size: 14px; line-height: 1.45; word-break: keep-all; }
.skin-ig .ig-caption .ig-user-inline { font-weight: 600; margin-right: 6px; }
.skin-ig .ig-caption .hashtag { color: #00376b; }
.skin-ig .ig-caption .body { white-space: pre-wrap; }
.skin-ig .ig-caption .more-btn { color:#737373; background:none; border:0; padding:0; cursor:pointer; }

/* ── 네이버 블로그 스킨 ─────────────────────────────────── */
.skin-naver {
  background: #fff;
  color: #333;
  font-family: "Nanum Gothic", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  overflow: hidden;
  max-width: 800px;
  margin: 0 auto;
}
.skin-naver .nv-blog-header {
  background: linear-gradient(90deg, #03c75a 0%, #029e47 100%);
  color: #fff;
  padding: 14px 20px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.skin-naver .nv-blog-header .nv-blog-title { font-weight: 700; font-size: 16px; }
.skin-naver .nv-blog-header .nv-blogger { font-size: 12px; opacity: 0.9; }
.skin-naver .nv-post-header { padding: 24px 28px 16px; border-bottom: 1px solid #eee; }
.skin-naver .nv-category { display:inline-block; padding: 2px 8px; border-radius: 2px; background: #f0f5ff; color:#2d6cdf; font-size: 11px; font-weight: 600; margin-bottom: 10px; }
.skin-naver .nv-post-title { font-size: 22px; font-weight: 700; color: #222; line-height: 1.4; word-break: keep-all; }
.skin-naver .nv-meta { display:flex; align-items:center; gap: 8px; margin-top: 8px; color:#888; font-size: 12px; }
.skin-naver .nv-meta .dot { width:3px; height:3px; border-radius:50%; background:#ccc; display:inline-block; }
.skin-naver .nv-body { padding: 20px 28px 32px; font-size: 15px; line-height: 1.85; color: #333; }
.skin-naver .nv-body h2 { font-size: 20px; font-weight: 700; color: #222; margin: 28px 0 12px; padding-left: 10px; border-left: 4px solid #03c75a; }
.skin-naver .nv-body h3 { font-size: 17px; font-weight: 700; color: #222; margin: 20px 0 8px; }
.skin-naver .nv-body p { margin: 10px 0; }
.skin-naver .nv-body img { max-width: 100%; height: auto; border-radius: 4px; margin: 14px auto; display: block; }
.skin-naver .nv-body blockquote { border-left: 4px solid #ddd; padding: 8px 16px; color:#555; margin: 14px 0; background:#fafafa; }
.skin-naver .nv-body ul, .skin-naver .nv-body ol { padding-left: 24px; margin: 10px 0; }
.skin-naver .nv-body li { margin: 4px 0; }
.skin-naver .nv-footer { border-top: 1px solid #eee; padding: 14px 28px; display:flex; justify-content: space-around; color:#666; font-size: 13px; }
.skin-naver .nv-footer > div { display:flex; align-items:center; gap: 6px; }
.skin-naver .nv-footer svg { width:18px; height:18px; }