/*
Theme Name: Postify
Theme URI: https://postify.club
Author: Postify
Author URI: https://postify.club
Description: Postify 검색 유입형 블로그 운영 시스템 마케팅 테마. 다크 그린 톤, 풀 커스텀, 제로 의존성.
Version: 3.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: Proprietary
Text Domain: postify
*/

/* =========================================
   Postify Custom Theme v1
   기존 React 랜딩(/Volumes/.../CDNG_POSTIFY/landing/) 디자인 1:1 이식
   ========================================= */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  background: #0B0C0B;
  color: #EAE8E0;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: break-word;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ---- 디자인 토큰 ---- */
:root {
  --bg: #0B0C0B;  /* v3 통일 색 (home.css와 일치) */
  --bg-alt: #0d0d0d;
  --card: #121212;
  --card-hover: #151515;
  --border: #1a1a1a;
  --border-card: #1f1f1f;
  --border-soft: #2a2a2a;
  --border-hard: #3a3a3a;

  --green: #1db954;
  --green-hi: #1ed760;
  --green-mid: #56f5a1;
  --green-soft: #9dffd1;
  --amber: #fbbf24;
  --amber-hi: #fcd34d;
  --amber-soft: rgba(251, 191, 36, 0.2);

  --text: #fff;
  --text-ccc: #ccc;
  --text-888: #888;
  --text-666: #666;
  --text-555: #555;
  --text-444: #444;
  --text-333: #333;

  --max-3xl: 768px;
  --max-4xl: 896px;
  --max-5xl: 1024px;
  --max-6xl: 1152px;

  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
}

/* ---- 공통 유틸 ---- */
.container { max-width: var(--max-6xl); margin: 0 auto; padding: 0 24px; }
.container-3xl { max-width: var(--max-3xl); margin: 0 auto; padding: 0 24px; }
.container-4xl { max-width: var(--max-4xl); margin: 0 auto; padding: 0 24px; }
.container-5xl { max-width: var(--max-5xl); margin: 0 auto; padding: 0 24px; }
.section { padding: 80px 0; }
.section-alt { background: var(--bg-alt); }
.section-tight { padding: 64px 24px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: var(--radius-xl);
  font-size: 15px;
  font-weight: 600;
  transition: all 0.15s ease;
  text-decoration: none;
}
.btn-primary { background: var(--green); color: #000; }
.btn-primary:hover { background: var(--green-hi); }
.btn-ghost { border: 1px solid var(--border-soft); color: var(--text-ccc); background: transparent; }
.btn-ghost:hover { border-color: var(--border-hard); color: #fff; }
.btn-amber { background: var(--amber); color: #000; }
.btn-amber:hover { background: var(--amber-hi); }
.btn-sm { padding: 10px 18px; font-size: 13px; border-radius: var(--radius-lg); }
.btn-lg { padding: 16px 32px; font-size: 16px; }

/* ---- 헤더 / Nav ---- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(10, 10, 10, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: var(--max-6xl);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.nav-logo-mark {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--green);
  display: flex; align-items: center; justify-content: center;
}
.nav-logo-mark svg { color: #000; width: 16px; height: 16px; }
.nav-logo-text {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--green), var(--green-mid), var(--green-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav-links a {
  font-size: 14px;
  color: var(--text-888);
  transition: color 0.15s;
}
.nav-links a:hover { color: #fff; }

/* ---- Hero ---- */
.hero { padding: 128px 24px 80px; }
.hero-inner { max-width: var(--max-4xl); margin: 0 auto; text-align: center; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(29, 185, 84, 0.1);
  border: 1px solid rgba(29, 185, 84, 0.2);
  margin-bottom: 24px;
  font-size: 12px;
  color: var(--green);
  font-weight: 500;
}
.hero-badge svg { width: 13px; height: 13px; }
.hero-h1 {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 24px;
}
.hero-gradient {
  background: linear-gradient(90deg, var(--green), var(--green-mid));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  font-size: 18px;
  color: var(--text-888);
  margin: 0 auto 40px;
  max-width: 560px;
  line-height: 1.6;
}
.hero-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-hint {
  margin-top: 16px;
  font-size: 12px;
  color: var(--text-555);
}

/* ---- 섹션 헤더 ---- */
.section-header { text-align: center; margin-bottom: 56px; }
.section-header h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 12px;
}
.section-header p {
  color: var(--text-888);
  font-size: 16px;
}

/* ---- 듀얼 트랙 카드 (홈) ---- */
.dual-track-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: var(--max-5xl);
  margin: 0 auto;
}
@media (min-width: 768px) {
  .dual-track-grid { grid-template-columns: repeat(2, 1fr); }
}
.track-card {
  display: flex;
  flex-direction: column;
  padding: 36px 32px;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border-card);
  background: var(--card);
  transition: transform 0.3s ease, border-color 0.3s ease;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
}
.track-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at top right, rgba(29, 185, 84, 0.06), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.track-card.track-agency::before {
  background: radial-gradient(circle at top right, rgba(251, 191, 36, 0.06), transparent 60%);
}
.track-card:hover { transform: translateY(-4px); border-color: var(--border-soft); }
.track-card:hover::before { opacity: 1; }

.track-card-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: rgba(29, 185, 84, 0.12);
  display: flex; align-items: center; justify-content: center;
  color: var(--green);
  margin-bottom: 20px;
}
.track-card.track-agency .track-card-icon {
  background: rgba(251, 191, 36, 0.12);
  color: var(--amber);
}

.track-card h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 4px;
  color: #fff;
}
.track-card-sub {
  font-size: 14px;
  color: var(--text-888);
  margin-bottom: 20px;
}

.track-card-list {
  flex: 1;
  margin-bottom: 20px;
}
.track-card-list li {
  padding: 6px 0;
  font-size: 14px;
  color: var(--text-ccc);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.track-card-list li:last-child { border-bottom: none; }

.track-card-meta {
  font-size: 12px;
  color: var(--text-666);
  margin-bottom: 16px;
  font-weight: 500;
}

.track-card-ctas {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.track-card-ctas .btn {
  align-self: flex-start;
}
.track-card-more {
  font-size: 13px;
  color: var(--text-888);
  font-weight: 500;
  transition: color 0.15s;
}
.track-card-more:hover { color: #fff; }

/* ---- Features ---- */
.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 768px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .features-grid { grid-template-columns: repeat(3, 1fr); }
}
.feature-card {
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border-card);
  background: var(--card);
  padding: 24px;
  transition: border-color 0.15s;
}
.feature-card:hover { border-color: var(--border-soft); }
.feature-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.feature-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(29, 185, 84, 0.1);
  display: flex; align-items: center; justify-content: center;
  color: var(--green);
  transition: background 0.15s;
}
.feature-card:hover .feature-icon { background: rgba(29, 185, 84, 0.15); }
.feature-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--border-soft);
  color: var(--text-888);
}
.feature-card h3 {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}
.feature-card p {
  color: var(--text-888);
  font-size: 13px;
  line-height: 1.6;
}

/* ---- Pricing ---- */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: var(--max-5xl);
  margin: 0 auto;
}
@media (min-width: 768px) {
  .pricing-grid { grid-template-columns: repeat(3, 1fr); }
}
.price-card {
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border-card);
  background: var(--card);
  padding: 24px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.price-card.popular { border-color: rgba(29, 185, 84, 0.3); }
.price-card.business { border-color: var(--amber-soft); }
.price-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--green);
  color: #000;
  font-size: 11px;
  font-weight: 700;
}
.price-card h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
}
.price-card.popular h3 { color: var(--green); }
.price-card.business h3 { color: var(--amber); }
.price-amount {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
}
.price-amount-sm { font-size: 20px; }
.price-amount .per { font-size: 14px; color: var(--text-666); font-weight: 400; }
.price-features {
  flex: 1;
  margin-bottom: 24px;
}
.price-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-ccc);
  padding: 4px 0;
}
.price-features li svg {
  flex-shrink: 0;
  width: 14px; height: 14px;
  color: var(--green);
}
.price-card.business .price-features li svg { color: var(--amber); }
.price-btn {
  width: 100%;
  padding: 12px 0;
  border-radius: var(--radius-xl);
  font-size: 14px;
  font-weight: 600;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.price-btn-disabled { border: 1px solid var(--border-soft); color: var(--text-888); background: transparent; }
.price-btn-green { background: var(--green); color: #000; }
.price-btn-green:hover { background: var(--green-hi); }
.price-btn-amber { background: var(--amber); color: #000; }
.price-btn-amber:hover { background: var(--amber-hi); }
.pricing-foot {
  text-align: center;
  margin-top: 24px;
  font-size: 12px;
  color: var(--text-555);
}

/* ---- FAQ ---- */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: var(--max-3xl);
  margin: 0 auto;
}
.faq-item {
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border-card);
  background: var(--card);
  overflow: hidden;
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  cursor: pointer;
  font-size: 14px;
  color: #fff;
  font-weight: 500;
  list-style: none;
  transition: background 0.15s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--card-hover); }
.faq-item summary svg {
  width: 16px; height: 16px;
  color: var(--text-555);
  transition: transform 0.15s;
  flex-shrink: 0;
}
.faq-item[open] summary svg { transform: rotate(180deg); }
.faq-item .faq-a {
  padding: 0 24px 16px;
  font-size: 13px;
  color: var(--text-888);
  line-height: 1.6;
}

/* ---- CTA ---- */
.cta-inner {
  max-width: var(--max-3xl);
  margin: 0 auto;
  text-align: center;
}
.cta-inner h2 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 16px;
}
.cta-inner p {
  color: var(--text-888);
  font-size: 16px;
  margin-bottom: 32px;
}

/* ---- Footer ---- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 40px 24px;
  margin-top: 40px;
}
.site-footer-inner {
  max-width: var(--max-6xl);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.site-footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.site-footer-top .nav-logo-mark { width: 24px; height: 24px; }
.site-footer-top .nav-logo-mark svg { width: 12px; height: 12px; }
.site-footer-top .nav-logo-text {
  font-size: 14px;
  -webkit-text-fill-color: var(--text-888);
  background: none;
  color: var(--text-888);
}
.site-footer-links {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 12px;
  color: var(--text-555);
}
.site-footer-links a:hover { color: var(--text-888); }
.site-footer-copy {
  font-size: 11px;
  color: var(--text-444);
}
.site-footer-biz {
  border-top: 1px solid var(--border);
  padding-top: 20px;
  font-size: 11px;
  color: var(--text-555);
  line-height: 1.8;
}
.site-footer-biz p { margin: 0 0 4px; }
.site-footer-biz .label { color: var(--text-666); }
.site-footer-biz .sep { margin: 0 8px; color: var(--text-333); }
.site-footer-biz .note { color: var(--text-444); }
.site-footer-biz a { color: var(--text-666); }
.site-footer-biz a:hover { color: var(--text-888); }

/* ---- 일반 페이지 (page.php) ---- */
.page-wrap {
  padding: 128px 24px 80px;
}
.page-inner {
  max-width: var(--max-3xl);
  margin: 0 auto;
}
.page-inner h1 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 24px;
}
.page-content {
  font-size: 16px;
  color: var(--text-ccc);
  line-height: 1.8;
}
.page-content h2 { font-size: 24px; font-weight: 700; margin: 32px 0 16px; color: #fff; }
.page-content h3 { font-size: 18px; font-weight: 600; margin: 24px 0 12px; color: #fff; }
.page-content p { margin: 0 0 16px; }
.page-content ul, .page-content ol { padding-left: 24px; margin: 0 0 16px; }
.page-content ul { list-style: disc; }
.page-content ol { list-style: decimal; }
.page-content li { margin-bottom: 6px; }
.page-content a { color: var(--green); border-bottom: 1px solid rgba(29, 185, 84, 0.3); }
.page-content a:hover { border-bottom-color: var(--green); }
.page-content blockquote {
  border-left: 3px solid var(--green);
  padding: 8px 16px;
  margin: 16px 0;
  color: var(--text-888);
  font-style: italic;
}
.page-content code {
  background: var(--card);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
}
.page-content pre {
  background: var(--card);
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 0 0 16px;
}
.page-content pre code { background: none; padding: 0; }
.page-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 14px;
}
.page-content th, .page-content td {
  border: 1px solid var(--border);
  padding: 8px 12px;
  text-align: left;
}
.page-content th { background: var(--card); font-weight: 600; }

/* ---- 블로그 ---- */
.archive-wrap, .single-wrap, .blog-wrap {
  padding: 128px 24px 80px;
}
.archive-inner, .blog-inner {
  max-width: var(--max-6xl);
  margin: 0 auto;
}
.archive-header {
  text-align: center;
  margin-bottom: 32px;
}
.archive-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 8px;
}
.archive-desc {
  color: var(--text-888);
  font-size: 15px;
  max-width: 600px;
  margin: 0 auto;
}

/* 카테고리 가로 네비 */
.blog-cat-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 32px;
  padding: 8px 0;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-soft) transparent;
  justify-content: center;
}
.blog-cat-nav::-webkit-scrollbar { height: 4px; }
.blog-cat-nav::-webkit-scrollbar-thumb { background: var(--border-soft); border-radius: 2px; }
.blog-cat-nav a {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border-card);
  background: var(--card);
  color: var(--text-ccc);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s;
  white-space: nowrap;
}
.blog-cat-nav a:hover {
  border-color: var(--border-soft);
  color: #fff;
}
.blog-cat-nav a.active {
  background: var(--green);
  color: #000;
  border-color: var(--green);
}
@media (max-width: 768px) {
  .blog-cat-nav {
    justify-content: flex-start;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* 카드 그리드 */
.post-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 640px) {
  .post-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .post-grid { grid-template-columns: repeat(3, 1fr); }
}

/* 포스트 카드 (호버 줌인) */
.post-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border-card);
  background: var(--card);
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease;
  text-decoration: none;
  color: inherit;
}
.post-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-soft);
}

/* 썸네일 영역 */
.post-card-image-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-alt);
}
.post-card-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.5s ease;
}
.post-card:hover .post-card-image-wrap img {
  transform: scale(1.05);
  filter: brightness(1.05);
}
.post-card-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bg-alt), var(--card));
  color: var(--text-555);
  font-size: 14px;
}
.post-card-cat-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(29, 185, 84, 0.9);
  color: #000;
  font-size: 11px;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

/* 카드 본문 */
.post-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.post-card .meta {
  font-size: 12px;
  color: var(--text-555);
  margin-bottom: 8px;
}
.post-card h2 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 8px;
  color: #fff;
  transition: color 0.15s;
}
.post-card:hover h2 { color: var(--green); }
.post-card .excerpt {
  color: var(--text-888);
  font-size: 13px;
  line-height: 1.6;
  flex: 1;
}
.post-card .read-more {
  margin-top: 16px;
  font-size: 12px;
  color: var(--green);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* 빈 상태 */
.post-empty {
  text-align: center;
  padding: 80px 0;
  color: var(--text-555);
  font-size: 14px;
}
.single-wrap article {
  max-width: var(--max-3xl);
  margin: 0 auto;
}
.single-wrap h1 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 12px;
}
.single-wrap .meta {
  font-size: 13px;
  color: var(--text-555);
  margin-bottom: 32px;
}
.pagination {
  margin-top: 40px;
  text-align: center;
  font-size: 14px;
  color: var(--text-888);
}
.pagination a {
  display: inline-block;
  padding: 8px 14px;
  margin: 0 4px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  color: var(--text-ccc);
}
.pagination a:hover { border-color: var(--green); color: var(--green); }
.pagination .current {
  display: inline-block;
  padding: 8px 14px;
  margin: 0 4px;
  background: var(--green);
  color: #000;
  border-radius: 8px;
  font-weight: 600;
}

/* ---- 반응형 ---- */
@media (max-width: 768px) {
  .hero-h1 { font-size: 36px; }
  .hero-sub { font-size: 16px; }
  .section-header h2 { font-size: 26px; }
  .nav-links { gap: 12px; }
  .nav-links a { font-size: 13px; }
  .nav-inner { padding: 12px 16px; }
  .hero { padding: 100px 16px 60px; }
  .section { padding: 60px 0; }
  .container { padding: 0 16px; }
  .site-footer-top { flex-direction: column; align-items: flex-start; }
}

/* ===============================================================
   v1.3.0 — 사진 Ken Burns + JG Luna 인터랙션 (다크 톤 유지)
   무거운 모션·블러 제거, 가벼운 GPU-friendly 패턴만
   =============================================================== */

/* ---- 정렬 방어 (전역) ---- */
* { min-width: 0; }
.container, .container-3xl, .container-4xl, .container-5xl { width: 100%; box-sizing: border-box; }
.features-grid, .pricing-grid, .post-grid, .dual-track-grid { align-items: stretch; }
.feature-card, .price-card, .post-card, .track-card { height: 100%; }
.track-card-ctas .btn { align-self: auto; }
.track-card .btn, .price-card .price-btn { align-self: stretch; text-align: center; justify-content: center; }

/* ---- Eyebrow (넘버드 섹션 라벨) ---- */
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 600;
  display: inline-block;
}

/* ---- Reveal (스크롤 등장) ---- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }

/* ---- Display heading (큰 카피) ---- */
.display {
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: #fff;
}

/* ---- Hero v3 (사진 Ken Burns + 다크 오버레이) ---- */
.hero-v3 {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #000;
}
.hero-v3-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-v3-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero-v3-photo-placeholder {
  width: 100%; height: 100%;
  background:
    radial-gradient(circle at 30% 40%, rgba(29, 185, 84, 0.25), transparent 60%),
    linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0d2818 100%);
}
.hero-v3-photo .ken-burns {
  width: 100%; height: 100%;
  animation: kenBurns 28s ease-in-out infinite alternate;
  transform-origin: center;
}
@keyframes kenBurns {
  0%   { transform: scale(1.0) translate(0, 0); }
  100% { transform: scale(1.10) translate(-1.5%, -1%); }
}
.hero-v3-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 70%, rgba(10,10,10,0.95) 100%);
  z-index: 1;
}
.hero-v3-inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-6xl);
  margin: 0 auto;
  padding: 100px 24px 60px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: end;
}
@media (min-width: 900px) {
  .hero-v3-inner { grid-template-columns: 1.4fr 1fr; gap: 64px; padding: 120px 24px 80px; }
}
.hero-v3-text .eyebrow { color: var(--green-mid); margin-bottom: 24px; }
.hero-v3-text h1 {
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0;
}
.hero-v3-text .accent {
  background: linear-gradient(90deg, var(--green), var(--green-mid));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-v3-meta {
  font-size: 14px;
  color: var(--text-ccc);
  line-height: 1.7;
  max-width: 380px;
}
.hero-v3-meta .ctas {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 28px;
}
.hero-v3-scroll {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
}
.hero-v3-scroll::after {
  content: '';
  display: block;
  width: 1px; height: 32px;
  margin: 8px auto 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.5), transparent);
}

/* ---- Section padding 표준화 (큰 여백, JG Luna 느낌) ---- */
.section-lg { padding: 96px 0; }
@media (min-width: 1024px) { .section-lg { padding: 128px 0; } }

/* ---- Section header (JG Luna 패턴: 좌 eyebrow / 우 큰 헤드라인) ---- */
.section-grid-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 56px;
}
@media (min-width: 900px) {
  .section-grid-header { grid-template-columns: 2fr 10fr; gap: 32px; align-items: start; }
}
.section-grid-header h2 {
  font-size: clamp(28px, 4vw, 56px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: #fff;
  margin: 0;
}

/* ---- 3-col 단순 카드 (운영 방식 등) ---- */
.method-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 768px) { .method-grid { grid-template-columns: repeat(3, 1fr); gap: 48px; } }
.method-num {
  font-size: 32px;
  font-weight: 500;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.method-title {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 12px;
}
.method-desc {
  font-size: 14px;
  color: var(--text-888);
  line-height: 1.7;
}

/* ---- Index Row (JG Luna 핵심 패턴, 호버 슬라이드) ---- */
.idx-list { width: 100%; }
.idx-row {
  display: grid;
  grid-template-columns: 48px 1fr 220px 32px;
  gap: 24px;
  padding: 22px 0;
  border-top: 1px solid var(--border);
  align-items: baseline;
  text-decoration: none;
  color: inherit;
  transition:
    padding-left 0.5s cubic-bezier(.2,.7,.2,1),
    background-color 0.3s ease;
}
.idx-row:hover { padding-left: 16px; }
.idx-row:hover .idx-arrow { opacity: 1; transform: translateX(0); color: var(--green); }
.idx-row:last-child { border-bottom: 1px solid var(--border); }
.idx-num {
  font-variant-numeric: tabular-nums;
  color: var(--text-555);
  font-size: 13px;
  padding-top: 4px;
}
.idx-title {
  font-size: 22px;
  letter-spacing: -0.025em;
  font-weight: 500;
  color: #fff;
}
.idx-meta {
  color: var(--text-888);
  font-size: 13px;
  padding-top: 4px;
}
.idx-arrow {
  opacity: 0;
  transform: translateX(-8px);
  color: var(--text-ccc);
  font-size: 18px;
  padding-top: 4px;
  text-align: right;
  transition: opacity 0.4s ease, transform 0.4s ease, color 0.3s ease;
}
@media (max-width: 768px) {
  .idx-row { grid-template-columns: 36px 1fr 24px; gap: 12px; padding: 18px 0; }
  .idx-meta { display: none; }
  .idx-title { font-size: 18px; }
  .idx-row:hover { padding-left: 0; }
  .idx-arrow { opacity: 1; transform: none; }
}

/* ---- Chip filter ---- */
.chip {
  border: 1px solid var(--border-card);
  background: var(--card);
  color: var(--text-888);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
  font-family: inherit;
}
.chip:hover { color: #fff; border-color: var(--border-soft); }
.chip[aria-pressed="true"] { background: var(--green); color: #000; border-color: var(--green); }

/* ---- 카운트업 숫자 ---- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 32px;
  border-top: 1px solid #fff;
  padding-top: 48px;
}
@media (min-width: 768px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-num {
  font-size: clamp(44px, 5vw, 64px);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  color: #fff;
  line-height: 1;
}
.stat-num .plus {
  font-size: 0.55em;
  color: var(--text-555);
  margin-left: 2px;
}
.stat-label {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-888);
  margin-top: 16px;
}

/* ---- Vertical row (vrow — JG Luna 영역 테이블) ---- */
.vrow {
  display: grid;
  grid-template-columns: 60px 1fr 1.4fr 80px;
  gap: 24px;
  padding: 36px 0;
  border-top: 1px solid var(--border);
  align-items: start;
}
.vrow:last-child { border-bottom: 1px solid var(--border); }
.vrow-num { font-size: 13px; color: var(--text-555); padding-top: 6px; font-variant-numeric: tabular-nums; }
.vrow-title { font-size: 26px; letter-spacing: -0.025em; font-weight: 500; line-height: 1.1; color: #fff; }
.vrow-sub { font-size: 12px; color: var(--text-888); margin-top: 6px; letter-spacing: 0.05em; text-transform: uppercase; }
.vrow-desc { font-size: 14px; color: var(--text-888); line-height: 1.7; }
.vrow-count {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.04em;
  text-align: right;
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
  color: var(--green);
}
.vrow-count small {
  font-size: 11px;
  color: var(--text-555);
  font-weight: 400;
  display: block;
  margin-top: 4px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.vrow ul.tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.vrow ul.tags li a {
  display: inline-block;
  border: 1px solid var(--border-card);
  border-radius: 100px;
  padding: 3px 12px;
  font-size: 12px;
  color: var(--text-888);
  background: transparent;
  transition: border-color 0.2s, color 0.2s;
}
.vrow ul.tags li a:hover { border-color: var(--green); color: var(--green); }
@media (max-width: 768px) {
  .vrow { grid-template-columns: 40px 1fr 60px; gap: 12px; padding: 24px 0; }
  .vrow > div:nth-child(3) { grid-column: 1 / -1; }
  .vrow-title { font-size: 20px; }
  .vrow-count { font-size: 20px; }
}

/* ---- Footer banner (풀블리드 CTA) ---- */
.foot-banner {
  position: relative;
  min-height: 380px;
  background: linear-gradient(135deg, #0a0a0a 0%, #0d2818 50%, #0a0a0a 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.foot-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(29, 185, 84, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 185, 84, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.foot-banner-inner {
  max-width: var(--max-6xl);
  margin: 0 auto;
  padding: 80px 24px;
  position: relative;
  z-index: 1;
  width: 100%;
}
.foot-banner h2 {
  font-size: clamp(32px, 5vw, 60px);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin-bottom: 20px;
}
.foot-banner p {
  color: rgba(255,255,255,0.7);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 560px;
}
.foot-banner-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- 모바일 보강 ---- */
@media (max-width: 768px) {
  .hero-v3 { min-height: 75vh; }
  .section-lg { padding: 64px 0; }
}

/* ===============================================================
   v1.4.0 — HOOK 섹션 + 정렬 방어 강화
   =============================================================== */

/* ---- 정렬 방어 강화 ---- */
img, video { max-width: 100%; height: auto; display: block; }
.container, .container-3xl, .container-4xl, .container-5xl,
.hero-v3-inner, .foot-banner-inner { max-width: 100%; }
.container { max-width: var(--max-6xl); }
.container-3xl { max-width: var(--max-3xl); }
.container-4xl { max-width: var(--max-4xl); }
.container-5xl { max-width: var(--max-5xl); }
.hero-v3-inner { max-width: var(--max-6xl); }
.foot-banner-inner { max-width: var(--max-6xl); }

/* idx-row 폭 안전 */
.idx-row { min-width: 0; }
.idx-row > div { min-width: 0; overflow-wrap: anywhere; }
.idx-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* vrow 폭 안전 */
.vrow > div { min-width: 0; }
.vrow ul.tags { overflow: visible; }

/* stat-grid 흰 줄 → 그린 ---- */
.stat-grid { border-top-color: rgba(255,255,255,0.08); }

/* 섹션 grid header가 좁은 desktop에서 안 깨지게 */
@media (min-width: 900px) and (max-width: 1100px) {
  .section-grid-header { grid-template-columns: 1fr 5fr; gap: 24px; }
}

/* ---- HOOK 섹션 (퍼널 입구) ---- */
.hook-section {
  padding: 96px 24px;
  text-align: center;
  background: var(--bg);
  position: relative;
}
.hook-section::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 1px; height: 56px;
  background: linear-gradient(180deg, transparent, rgba(29, 185, 84, 0.3));
}
.hook-inner {
  max-width: var(--max-4xl);
  margin: 0 auto;
}
.hook-question {
  font-size: clamp(16px, 2vw, 20px);
  color: var(--text-888);
  margin-bottom: 32px;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.hook-question::after {
  content: '';
  display: block;
  width: 1px;
  height: 32px;
  margin: 24px auto 0;
  background: linear-gradient(180deg, var(--text-555), transparent);
}
.hook-answer {
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.05;
  color: #fff;
  margin: 0 0 24px;
}
.hook-answer .accent {
  background: linear-gradient(90deg, var(--green), var(--green-mid));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hook-bridge {
  font-size: 14px;
  color: var(--text-888);
  letter-spacing: 0.02em;
  margin-top: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hook-bridge svg {
  animation: hookArrow 2s ease-in-out infinite;
}
@keyframes hookArrow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

@media (max-width: 768px) {
  .hook-section { padding: 64px 16px; }
}

/* ===============================================================
   v1.5.0 — 빈칸 PUZZLE Hero + 답 공개 + JG Luna 톤다운
   =============================================================== */

/* ---- Hero v4: 빈칸 puzzle 풀스크린 ---- */
.hero-puzzle {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #000;
}
.hero-puzzle-photo {
  position: absolute; inset: 0; z-index: 0;
}
.hero-puzzle-photo .ken-burns {
  width: 100%; height: 100%;
  animation: kenBurns 30s ease-in-out infinite alternate;
}
.hero-puzzle-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-puzzle-photo-placeholder {
  width: 100%; height: 100%;
  background:
    radial-gradient(circle at 30% 40%, rgba(29, 185, 84, 0.2), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(86, 245, 161, 0.08), transparent 60%),
    linear-gradient(135deg, #050505 0%, #0a0a0a 40%, #0d2818 100%);
}
.hero-puzzle-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.65) 100%);
  z-index: 1;
}

.hero-puzzle-inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-5xl);
  margin: 0 auto;
  padding: 100px 24px 60px;
  width: 100%;
  text-align: center;
}
.hero-puzzle-question {
  font-size: clamp(16px, 1.6vw, 22px);
  color: rgba(255,255,255,0.65);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 32px;
}
.hero-puzzle-h1 {
  font-size: clamp(40px, 7vw, 84px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.1;
  color: #fff;
  margin: 0;
}
.hero-puzzle-h1 .blank {
  display: inline-block;
  min-width: clamp(180px, 28vw, 380px);
  padding: 0 12px;
  text-align: center;
  border-bottom: 4px solid var(--green);
  color: transparent;
  position: relative;
  margin: 0 4px;
  vertical-align: baseline;
  font-weight: 700;
}
/* "Postify" 텍스트가 inline으로 들어가서 자연스러운 baseline + 너비 확보 (invisible).
   ::before가 그 위에 visible Postify 오버레이 (filled 상태에서 등장). */
.hero-puzzle-h1 .blank::before {
  content: 'Postify';
  position: absolute;
  left: 0; right: 0;
  top: 0; bottom: 0;
  text-align: center;
  font-weight: 700;
  background: linear-gradient(90deg, var(--green), var(--green-mid));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.hero-puzzle-h1 .blank.filled::before { opacity: 1; }

.hero-puzzle-scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.hero-puzzle-scroll-line {
  width: 1px;
  height: 32px;
  background: linear-gradient(180deg, rgba(255,255,255,0.5), transparent);
  animation: scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---- 답 공개 섹션 ---- */
.answer-reveal {
  padding: 120px 24px;
  text-align: center;
  background: var(--bg);
  border-top: 1px solid rgba(29, 185, 84, 0.1);
}
.answer-inner {
  max-width: var(--max-4xl);
  margin: 0 auto;
}
.answer-label {
  font-size: 13px;
  color: var(--text-555);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 24px;
  font-weight: 500;
}
.answer-h2 {
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  margin: 0 0 28px;
  color: #fff;
}
.answer-h2 .pop {
  background: linear-gradient(90deg, var(--green), var(--green-mid));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}
.answer-desc {
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--text-ccc);
  line-height: 1.7;
  max-width: 540px;
  margin: 0 auto 0;
}
.answer-arrow {
  margin-top: 56px;
  font-size: 12px;
  color: var(--text-555);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ---- JG Luna 톤다운: 섹션 헤드라인 단순화 ---- */
/* 기존 .section-grid-header에 추가 보강 */
.section-heading {
  margin-bottom: 56px;
}
.section-heading h2 {
  font-size: clamp(28px, 4.5vw, 56px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: #fff;
  margin: 0;
}
.section-heading .label {
  font-size: 13px;
  color: var(--green);
  letter-spacing: 0.05em;
  margin-bottom: 16px;
  font-weight: 500;
}
.section-heading p.sub {
  font-size: 16px;
  color: var(--text-888);
  margin-top: 16px;
  line-height: 1.7;
  max-width: 540px;
}

@media (max-width: 768px) {
  .answer-reveal { padding: 80px 16px; }
  .hero-puzzle-inner { padding: 80px 16px 60px; }
  .hero-puzzle-h1 .blank { min-width: 150px; padding: 0 6px; }
}

/* ===============================================================
   v1.6.0 — 모바일 햄버거 + 페르수에이션 흐름 (Pain → 함정+약력 → Choice)
   =============================================================== */

/* ---- 모바일 햄버거 메뉴 ---- */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  margin: -8px;
  cursor: pointer;
  color: #fff;
}
.nav-toggle svg {
  width: 22px;
  height: 22px;
  display: block;
}
.nav-mobile {
  display: none;
  position: fixed;
  inset: 56px 0 auto 0;
  background: rgba(10, 10, 10, 0.98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  z-index: 49;
  padding: 16px 0;
}
.nav-mobile.open { display: block; }
.nav-mobile a {
  display: block;
  padding: 14px 24px;
  font-size: 15px;
  color: var(--text-ccc);
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.nav-mobile a:hover { background: var(--card); color: #fff; }
.nav-mobile a:last-child { border-bottom: none; }

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; align-items: center; }
}

/* ---- Pain 섹션 ---- */
.pain-section {
  padding: 96px 24px;
  background: var(--bg-alt);
  border-top: 1px solid rgba(29, 185, 84, 0.08);
}
.pain-inner {
  max-width: var(--max-4xl);
  margin: 0 auto;
}
.pain-lead {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 56px;
  text-align: center;
}
.pain-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
  margin: 0 auto;
}
.pain-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  background: var(--card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
}
.pain-item-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(220, 38, 38, 0.1);
  color: rgb(248, 113, 113);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  font-weight: 700;
}
.pain-item-text {
  font-size: 15px;
  color: var(--text-ccc);
  line-height: 1.6;
  padding-top: 4px;
}
@media (max-width: 768px) {
  .pain-section { padding: 64px 16px; }
  .pain-item { padding: 16px 18px; }
  .pain-item-text { font-size: 14px; }
}

/* ---- AI 함정 + 운영자 약력 (트러스트 핵심) ---- */
.trap-section {
  padding: 120px 24px;
  background: var(--bg);
  position: relative;
}
.trap-inner {
  max-width: var(--max-5xl);
  margin: 0 auto;
}
.trap-statement {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 24px;
  text-align: center;
}
.trap-statement .strike {
  color: var(--text-555);
  text-decoration: line-through;
  text-decoration-color: rgba(248, 113, 113, 0.6);
  text-decoration-thickness: 3px;
}
.trap-statement .green { color: var(--green); }
.trap-data {
  font-size: clamp(16px, 1.8vw, 20px);
  color: var(--text-888);
  text-align: center;
  max-width: 640px;
  margin: 0 auto 72px;
  line-height: 1.7;
}

/* 운영자 카드 */
.founder-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding: 48px;
  background: linear-gradient(135deg, var(--card) 0%, rgba(29, 185, 84, 0.05) 100%);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-2xl);
  margin-top: 56px;
  position: relative;
  overflow: hidden;
}
.founder-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: linear-gradient(180deg, var(--green), var(--green-mid));
}
@media (min-width: 768px) {
  .founder-card { grid-template-columns: auto 1fr; gap: 48px; align-items: center; }
}
.founder-avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--green-mid));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 700;
  color: #000;
  flex-shrink: 0;
  margin: 0 auto;
}
@media (min-width: 768px) { .founder-avatar { margin: 0; } }
.founder-label {
  font-size: 13px;
  color: var(--green);
  letter-spacing: 0.05em;
  font-weight: 600;
  margin: 0 0 12px;
  text-align: center;
}
@media (min-width: 768px) { .founder-label { text-align: left; } }
.founder-name {
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 700;
  color: #fff;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
  text-align: center;
}
@media (min-width: 768px) { .founder-name { text-align: left; } }
.founder-creds {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  justify-content: center;
}
@media (min-width: 768px) { .founder-creds { justify-content: flex-start; } }
.founder-cred {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(29, 185, 84, 0.12);
  border: 1px solid rgba(29, 185, 84, 0.3);
  color: var(--green);
  font-size: 13px;
  font-weight: 600;
}
.founder-bio {
  font-size: 15px;
  color: var(--text-ccc);
  line-height: 1.7;
  margin: 0;
  text-align: center;
}
@media (min-width: 768px) { .founder-bio { text-align: left; } }

/* ---- Comparison (수작업/대행/AI툴/Postify) ---- */
.compare-section {
  padding: 120px 24px;
  background: var(--bg-alt);
}
.compare-inner {
  max-width: var(--max-6xl);
  margin: 0 auto;
}
.compare-heading {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.2;
  color: #fff;
  text-align: center;
  margin: 0 0 56px;
}
.compare-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) { .compare-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .compare-grid { grid-template-columns: repeat(4, 1fr); } }
.compare-card {
  padding: 28px 24px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  background: var(--card);
  position: relative;
  transition: border-color 0.3s;
}
.compare-card.winner {
  border-color: var(--green);
  background: linear-gradient(135deg, var(--card) 0%, rgba(29, 185, 84, 0.08) 100%);
}
.compare-card-tag {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-555);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.compare-card.winner .compare-card-tag { color: var(--green); }
.compare-card-title {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.compare-card-limit {
  font-size: 13px;
  color: var(--text-888);
  line-height: 1.6;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.compare-card.winner .compare-card-limit { color: var(--text-ccc); }
.compare-card-mark {
  display: inline-block;
  margin-top: 12px;
  font-size: 16px;
}
.compare-card .mark-x { color: rgb(248, 113, 113); }
.compare-card .mark-o { color: var(--green); }

/* ---- Choice (2-box 결정) ---- */
.choice-section {
  padding: 120px 24px;
  background: var(--bg);
}
.choice-inner {
  max-width: var(--max-6xl);
  margin: 0 auto;
}
.choice-heading {
  font-size: clamp(28px, 4.5vw, 52px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.15;
  color: #fff;
  text-align: center;
  margin: 0 0 16px;
}
.choice-sub {
  font-size: 16px;
  color: var(--text-888);
  text-align: center;
  margin: 0 0 56px;
}
.choice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: var(--max-5xl);
  margin: 0 auto;
}
@media (min-width: 768px) { .choice-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
.choice-box {
  display: flex;
  flex-direction: column;
  padding: 48px 36px;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border-soft);
  background: var(--card);
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
  position: relative;
  overflow: hidden;
}
.choice-box:hover {
  transform: translateY(-4px);
  border-color: var(--green);
  background: linear-gradient(135deg, var(--card) 0%, rgba(29, 185, 84, 0.05) 100%);
}
.choice-box.amber:hover {
  border-color: var(--amber);
  background: linear-gradient(135deg, var(--card) 0%, rgba(251, 191, 36, 0.05) 100%);
}
.choice-box-tag {
  font-size: 13px;
  color: var(--text-888);
  margin-bottom: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.choice-box-title {
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
  letter-spacing: -0.035em;
  line-height: 1.1;
}
.choice-box.amber .choice-box-title { color: var(--amber); }
.choice-box .accent { color: var(--green); }
.choice-box-desc {
  font-size: 15px;
  color: var(--text-ccc);
  line-height: 1.7;
  margin: 0 0 32px;
  flex: 1;
}
.choice-box-list {
  margin-bottom: 32px;
}
.choice-box-list li {
  padding: 6px 0;
  font-size: 14px;
  color: var(--text-ccc);
  padding-left: 18px;
  position: relative;
}
.choice-box-list li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
}
.choice-box.amber .choice-box-list li::before { color: var(--amber); }
.choice-box-cta {
  font-size: 16px;
  font-weight: 600;
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}
.choice-box.amber .choice-box-cta { color: var(--amber); }
.choice-box:hover .choice-box-cta {
  transform: translateX(4px);
}
.choice-box-cta { transition: transform 0.3s ease; }

/* 작은 Postifarm 풋노트 (메인엔 빼지만 흔적은 남김) */
.choice-footnote {
  text-align: center;
  margin-top: 48px;
  font-size: 13px;
  color: var(--text-555);
}
.choice-footnote a { color: var(--text-888); text-decoration: underline; text-underline-offset: 4px; }
.choice-footnote a:hover { color: var(--green); }

/* ---- 퍼널 번호 라벨 (1·막막함, 2·답, 3·비교) ---- */
.funnel-number {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(29, 185, 84, 0.3);
  background: rgba(29, 185, 84, 0.08);
  color: var(--green);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 24px;
}
.funnel-number .num {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.funnel-number .slash { opacity: 0.5; }

/* ===============================================================
   v1.8.0 — 검색 유입형 블로그 운영 시스템 포지셔닝
   Hero · Problem · Solution · ServiceSplit · Trust · WP-SEO · CTA
   =============================================================== */

/* ---- Hero v5 — 직접 statement (블랭크 X) ---- */
.hero-direct {
  position: relative;
  min-height: 96vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #000;
}
.hero-direct-photo {
  position: absolute; inset: 0; z-index: 0;
}
.hero-direct-photo .ken-burns {
  width: 100%; height: 100%;
  animation: kenBurns 30s ease-in-out infinite alternate;
}
.hero-direct-photo img {
  width: 100%; height: 100%; object-fit: cover;
}
.hero-direct-photo-placeholder {
  width: 100%; height: 100%;
  background:
    radial-gradient(circle at 25% 35%, rgba(29, 185, 84, 0.22), transparent 60%),
    radial-gradient(circle at 75% 65%, rgba(86, 245, 161, 0.10), transparent 60%),
    linear-gradient(135deg, #050505 0%, #0a0a0a 40%, #0d2818 100%);
}
.hero-direct-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.7) 100%);
  z-index: 1;
}

/* Hero v8 — 가운데 정렬 + 황금비율(φ=1.618) typography
   Base 17px → Sub 21.8px → Lead 27.5px → H1 65px (φ×4 ÷ 1.x)
   Letter-spacing: 큰 폰트일수록 더 좁게 (시각 균일감) */
.hero-direct-inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-4xl);
  margin: 0 auto;
  padding: 120px 24px 80px;
  width: 100%;
  text-align: center;
}
.hero-direct-lead {
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--green);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0 0 28px;
  text-transform: none;
}
.hero-direct-h1 {
  font-size: clamp(38px, 5.6vw, 64px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 36px;
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
}
.hero-direct-h1 .accent {
  background: linear-gradient(90deg, var(--green), var(--green-mid));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-direct-sub {
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--text-ccc);
  line-height: 1.75;
  letter-spacing: -0.005em;
  margin: 0 auto 16px;
  max-width: 480px;
}
.hero-direct-sub strong { color: #fff; font-weight: 600; }
.hero-direct-bridge {
  font-size: clamp(13px, 1.2vw, 14px);
  color: var(--text-888);
  line-height: 1.75;
  letter-spacing: -0.005em;
  margin: 36px auto;
  max-width: 480px;
  padding: 14px 20px;
  border: 1px solid rgba(29, 185, 84, 0.2);
  border-radius: var(--radius-lg);
  background: rgba(29, 185, 84, 0.04);
  text-align: center;
}
.hero-direct-ctas {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center;
}

/* ===============================================================
   v2.0.0 — 전체 헤드라인 황금비율 톤다운
   너무 큰 폰트들 축소 (88px → 64px, 56px → 48px, 48px → 40px)
   =============================================================== */
.problem-heading,
.compare-heading,
.choice-heading,
.trust-heading,
.solution-heading,
.wpseo-heading,
.service-split-heading {
  font-size: clamp(26px, 4vw, 44px);
  letter-spacing: -0.03em;
  line-height: 1.2;
}
.hero-puzzle-h1,
.hero-puzzle-h1 .blank::before {
  font-size: clamp(36px, 5.6vw, 64px) !important;
  letter-spacing: -0.035em !important;
}
.answer-h2 {
  font-size: clamp(40px, 6.4vw, 76px) !important;
  letter-spacing: -0.04em !important;
}
.foot-banner h2 {
  font-size: clamp(26px, 4vw, 44px) !important;
  letter-spacing: -0.03em !important;
}

/* ===============================================================
   v2.0.1 — 퍼널 재구성 (각 서비스 = 자체 split 섹션 + 체인포인트)
   =============================================================== */

/* ---- WHY Postify 섹션 (Trust 카드 큼직) ---- */
.why-postify {
  padding: 96px 24px;
  background: var(--bg-alt);
  text-align: center;
}
.why-postify-inner {
  max-width: var(--max-4xl);
  margin: 0 auto;
}
.why-postify-label {
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--green);
  font-weight: 600;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.why-postify-heading {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 48px;
}
.why-postify-bridge {
  margin-top: 48px;
  font-size: 14px;
  color: var(--text-888);
  letter-spacing: -0.005em;
}
.why-postify-bridge strong { color: var(--green); font-weight: 600; }

/* ---- Chain Point (섹션 간 미니멀 transition) ---- */
.chain-point {
  padding: 56px 24px 0;
  text-align: center;
  background: var(--bg);
  position: relative;
}
.chain-point-line {
  display: block;
  width: 1px;
  height: 40px;
  margin: 0 auto 20px;
  background: linear-gradient(180deg, transparent, var(--green));
}
.chain-point-text {
  font-size: clamp(14px, 1.4vw, 16px);
  color: var(--text-ccc);
  margin: 0 0 12px;
  letter-spacing: -0.005em;
  font-weight: 500;
}
.chain-point-text .em { color: var(--green); font-weight: 600; }
.chain-point-arrow {
  font-size: 18px;
  color: var(--green);
  display: inline-block;
  animation: bounceDown 2s ease-in-out infinite;
}
@keyframes bounceDown {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
.chain-point.alt { background: var(--bg-alt); }

/* ---- Service Deep (각 서비스 자체 섹션, 좌우 split) ---- */
.service-deep {
  padding: 80px 24px 96px;
  background: var(--bg);
  position: relative;
}
.service-deep.alt { background: var(--bg-alt); }
.service-deep-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  max-width: var(--max-6xl);
  margin: 0 auto;
  align-items: center;
}
@media (min-width: 900px) {
  .service-deep-grid { grid-template-columns: 1.1fr 1fr; gap: 72px; }
  .service-deep.reverse .service-deep-visual { order: -1; }
}

.service-deep-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(29, 185, 84, 0.12);
  border: 1px solid rgba(29, 185, 84, 0.3);
  color: var(--green);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
}
.service-deep-label.naver {
  background: rgba(3, 199, 90, 0.12);
  border-color: rgba(3, 199, 90, 0.35);
  color: #03c75a;
}
.service-deep-label.wordpress {
  background: rgba(75, 168, 216, 0.12);
  border-color: rgba(75, 168, 216, 0.35);
  color: #4ba8d8;
}
.service-deep-label.app {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.35);
  color: var(--amber);
}
.service-deep-title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.service-deep-question {
  font-size: clamp(15px, 1.5vw, 17px);
  color: var(--text-ccc);
  font-weight: 500;
  margin: 0 0 20px;
  letter-spacing: -0.005em;
}
.service-deep-pains {
  margin: 0 0 28px;
}
.service-deep-pains li {
  padding: 8px 0 8px 30px;
  position: relative;
  font-size: 14px;
  color: var(--text-ccc);
  line-height: 1.65;
}
.service-deep-pains li::before {
  content: '!';
  position: absolute;
  left: 0; top: 8px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(248, 113, 113, 0.12);
  color: rgb(248, 113, 113);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 11px;
}
.service-deep-solution {
  padding: 20px 24px;
  background: rgba(29, 185, 84, 0.08);
  border: 1px solid rgba(29, 185, 84, 0.25);
  border-radius: var(--radius-xl);
  margin-bottom: 28px;
}
.service-deep-solution.naver {
  background: rgba(3, 199, 90, 0.08);
  border-color: rgba(3, 199, 90, 0.3);
}
.service-deep-solution.wordpress {
  background: rgba(75, 168, 216, 0.08);
  border-color: rgba(75, 168, 216, 0.3);
}
.service-deep-solution.app {
  background: rgba(251, 191, 36, 0.06);
  border-color: rgba(251, 191, 36, 0.25);
}
.service-deep-solution-label {
  font-size: 11px;
  color: var(--green);
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0 0 8px;
  text-transform: uppercase;
}
.service-deep-solution.naver .service-deep-solution-label { color: #03c75a; }
.service-deep-solution.wordpress .service-deep-solution-label { color: #4ba8d8; }
.service-deep-solution.app .service-deep-solution-label { color: var(--amber); }
.service-deep-solution-text {
  font-size: 15px;
  color: var(--text-ccc);
  line-height: 1.7;
  margin: 0;
  letter-spacing: -0.005em;
}
.service-deep-solution-text strong { color: #fff; font-weight: 600; }
.service-deep-ctas {
  display: flex; flex-wrap: wrap; gap: 10px;
}

/* 시각 placeholder (우측) */
.service-deep-visual {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-2xl);
  background: linear-gradient(135deg, var(--card) 0%, rgba(29, 185, 84, 0.08) 100%);
  border: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.service-deep-visual.naver {
  background: linear-gradient(135deg, var(--card) 0%, rgba(3, 199, 90, 0.12) 100%);
}
.service-deep-visual.wordpress {
  background: linear-gradient(135deg, var(--card) 0%, rgba(75, 168, 216, 0.12) 100%);
}
.service-deep-visual.app {
  background: linear-gradient(135deg, var(--card) 0%, rgba(251, 191, 36, 0.10) 100%);
}
.service-deep-visual-icon {
  font-size: clamp(80px, 12vw, 120px);
  font-weight: 800;
  color: var(--green);
  opacity: 0.6;
  letter-spacing: -0.05em;
  line-height: 1;
}
.service-deep-visual.naver .service-deep-visual-icon { color: #03c75a; }
.service-deep-visual.wordpress .service-deep-visual-icon { color: #4ba8d8; }
.service-deep-visual.app .service-deep-visual-icon { color: var(--amber); }
.service-deep-visual-meta {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  font-size: 11px;
  color: var(--text-555);
  text-align: center;
  letter-spacing: 0.05em;
}

/* ===============================================================
   v2.0.2 — Hero 비유 카피 (월세/자가) 호기심 해소 UNPACK 섹션
   =============================================================== */

.unpack-section {
  padding: 96px 24px 80px;
  background: var(--bg);
  text-align: center;
}
.unpack-inner {
  max-width: var(--max-5xl);
  margin: 0 auto;
}
.unpack-question {
  font-size: 13px;
  color: var(--text-555);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 16px;
}
.unpack-heading {
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.25;
  color: #fff;
  margin: 0 0 56px;
}
.unpack-heading .em {
  background: linear-gradient(90deg, var(--green), var(--green-mid));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.unpack-compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 56px;
  text-align: left;
}
@media (min-width: 768px) {
  .unpack-compare {
    grid-template-columns: 1fr auto 1fr;
    gap: 24px;
    align-items: stretch;
  }
}

.unpack-card {
  padding: 32px 28px;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border-card);
  background: var(--card);
  display: flex;
  flex-direction: column;
}
.unpack-card.rent {
  background: linear-gradient(135deg, var(--card) 0%, rgba(248, 113, 113, 0.06) 100%);
  border-color: rgba(248, 113, 113, 0.25);
}
.unpack-card.owned {
  background: linear-gradient(135deg, var(--card) 0%, rgba(29, 185, 84, 0.08) 100%);
  border-color: rgba(29, 185, 84, 0.35);
}

.unpack-card-tag {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 12px;
}
.unpack-card.rent .unpack-card-tag { color: rgb(248, 113, 113); }
.unpack-card.owned .unpack-card-tag { color: var(--green); }
.unpack-card-title {
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 700;
  color: #fff;
  margin: 0 0 20px;
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.unpack-card ul {
  margin: 0;
  flex: 1;
}
.unpack-card ul li {
  padding: 10px 0;
  padding-left: 24px;
  font-size: 14px;
  color: var(--text-ccc);
  line-height: 1.6;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.unpack-card ul li:last-child { border-bottom: none; }
.unpack-card.rent ul li::before {
  content: '×';
  position: absolute;
  left: 0; top: 10px;
  color: rgb(248, 113, 113);
  font-weight: 700;
  font-size: 16px;
}
.unpack-card.owned ul li::before {
  content: '✓';
  position: absolute;
  left: 0; top: 10px;
  color: var(--green);
  font-weight: 700;
  font-size: 14px;
}

.unpack-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--text-555);
  font-weight: 600;
  padding: 12px 0;
}
@media (max-width: 767px) {
  .unpack-vs {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
}

.unpack-conclusion {
  padding: 36px;
  border-radius: var(--radius-2xl);
  background: linear-gradient(135deg, rgba(29, 185, 84, 0.1) 0%, rgba(86, 245, 161, 0.05) 100%);
  border: 1px solid rgba(29, 185, 84, 0.3);
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.unpack-conclusion-quote {
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 600;
  color: #fff;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
  line-height: 1.4;
}
.unpack-conclusion-quote .em {
  color: var(--green);
}
.unpack-conclusion-line {
  font-size: 14px;
  color: var(--text-888);
  margin: 0;
  letter-spacing: -0.005em;
}
.unpack-conclusion-line strong { color: #fff; font-weight: 600; }

/* ===============================================================
   v2.0.3 — 화자 톤 / 약력 spotlight / 리뷰 섹션 / Hero 빈칸 부활
   =============================================================== */

/* ---- Hero 새 카피 (브랜드블로그 + 빈칸) ---- */
.hero-puzzle-inner .hero-puzzle-lead {
  font-size: clamp(16px, 1.6vw, 19px);
  color: rgba(255,255,255,0.7);
  font-weight: 500;
  letter-spacing: -0.005em;
  margin: 0 0 24px;
}
.hero-puzzle-h1 .blank-end {
  display: inline-block;
  min-width: clamp(220px, 32vw, 420px);
  border-bottom: 4px solid var(--green);
  position: relative;
  margin-left: 8px;
  vertical-align: baseline;
  height: 1em;
  text-align: center;
  font-weight: 700;
  color: transparent;
}
.hero-puzzle-h1 .blank-end::before {
  content: 'Postify';
  position: absolute;
  left: 0; right: 0;
  bottom: 4px;
  font-weight: 700;
  background: linear-gradient(90deg, var(--green), var(--green-mid));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.hero-puzzle-h1 .blank-end.filled::before { opacity: 1; }
.hero-puzzle-meta {
  margin-top: 48px;
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--text-ccc);
  line-height: 1.8;
  letter-spacing: -0.005em;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.hero-puzzle-meta .speaker {
  color: var(--green);
  font-weight: 600;
}
.hero-puzzle-time {
  margin-top: 12px;
  font-size: 14px;
  color: var(--text-888);
}
.hero-puzzle-time strong { color: #fff; font-weight: 600; }

/* ---- 화자 톤 섹션 헤드 (Pain + 깨달음) ---- */
.speaker-section {
  padding: 96px 24px;
  background: var(--bg-alt);
}
.speaker-section.bg-base { background: var(--bg); }
.speaker-inner {
  max-width: var(--max-4xl);
  margin: 0 auto;
}
.speaker-quote-mark {
  font-size: 48px;
  color: var(--green);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 16px;
  opacity: 0.5;
  font-family: Georgia, serif;
}
.speaker-heading {
  font-size: clamp(24px, 3.5vw, 38px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.3;
  color: #fff;
  margin: 0 0 32px;
}
.speaker-heading .em { color: var(--green); }
.speaker-body {
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--text-ccc);
  line-height: 1.9;
  margin: 0 0 24px;
  letter-spacing: -0.005em;
}
.speaker-body strong { color: #fff; font-weight: 600; }

/* ---- 약력 SPOTLIGHT (중간 강조) ---- */
.credentials-spotlight {
  padding: 120px 24px;
  background:
    radial-gradient(circle at 30% 50%, rgba(29, 185, 84, 0.06), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
  text-align: center;
  position: relative;
}
.credentials-spotlight::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 1px; height: 56px;
  background: linear-gradient(180deg, transparent, var(--green));
}
.credentials-inner {
  max-width: var(--max-4xl);
  margin: 0 auto;
}
.credentials-intro {
  font-size: clamp(16px, 1.6vw, 18px);
  color: var(--text-888);
  margin: 0 0 16px;
  font-weight: 500;
}
.credentials-heading {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 48px;
}
.credentials-heading .em {
  background: linear-gradient(90deg, var(--green), var(--green-mid));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.credentials-trio {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: var(--max-4xl);
  margin: 0 auto 40px;
}
@media (min-width: 768px) { .credentials-trio { grid-template-columns: repeat(3, 1fr); } }

.credentials-item {
  padding: 32px 24px;
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(29, 185, 84, 0.3);
  background: linear-gradient(135deg, var(--card) 0%, rgba(29, 185, 84, 0.08) 100%);
  text-align: center;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.credentials-item:hover {
  transform: translateY(-4px);
  border-color: var(--green);
}
.credentials-item-icon {
  width: 48px; height: 48px;
  margin: 0 auto 16px;
  border-radius: 12px;
  background: rgba(29, 185, 84, 0.15);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
}
.credentials-item-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.credentials-item-sub {
  font-size: 13px;
  color: var(--text-888);
  margin: 0;
  letter-spacing: -0.005em;
}

.credentials-closing {
  font-size: clamp(15px, 1.6vw, 17px);
  color: var(--text-ccc);
  line-height: 1.8;
  max-width: 580px;
  margin: 32px auto 0;
}
.credentials-closing strong { color: var(--green); font-weight: 600; }

/* ---- 리뷰 섹션 ---- */
.reviews-section {
  padding: 96px 24px;
  background: var(--bg);
}
.reviews-inner {
  max-width: var(--max-6xl);
  margin: 0 auto;
}
.reviews-header {
  text-align: center;
  margin-bottom: 56px;
}
.reviews-label {
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--green);
  font-weight: 600;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.reviews-heading {
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 12px;
}
.reviews-sub {
  font-size: 15px;
  color: var(--text-888);
  margin: 0;
}

.reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 640px) { .reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } }

.review-card {
  padding: 28px 24px;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border-card);
  background: var(--card);
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s, transform 0.3s;
}
.review-card:hover {
  border-color: var(--border-soft);
  transform: translateY(-3px);
}
.review-stars {
  display: flex;
  gap: 2px;
  margin-bottom: 16px;
  color: var(--green);
  font-size: 14px;
}
.review-quote {
  font-size: 15px;
  color: var(--text-ccc);
  line-height: 1.7;
  margin: 0 0 24px;
  flex: 1;
  letter-spacing: -0.005em;
}
.review-quote::before { content: '"'; opacity: 0.5; margin-right: 4px; }
.review-quote::after { content: '"'; opacity: 0.5; margin-left: 2px; }
.review-result {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(29, 185, 84, 0.12);
  color: var(--green);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 16px;
  letter-spacing: -0.005em;
}
.review-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.review-author-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg-alt);
  border: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-ccc);
}
.review-author-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}
.review-author-name { color: #fff; font-weight: 600; }
.review-author-detail { color: var(--text-555); font-size: 11px; }

.reviews-placeholder-note {
  text-align: center;
  margin-top: 32px;
  font-size: 13px;
  color: var(--text-555);
}
.reviews-placeholder-note .em { color: var(--text-888); }

/* ===============================================================
   v2.0.4 — 심리 페르수에이션 강화 (conviction · loss aversion · commit)
   =============================================================== */

/* ---- Micro-conviction (각 섹션 끝 단정한 한 줄) ---- */
.conviction-line {
  margin: 48px auto 0;
  padding: 24px 28px;
  max-width: 580px;
  border-left: 3px solid var(--green);
  background: rgba(29, 185, 84, 0.04);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-size: clamp(15px, 1.5vw, 17px);
  color: #fff;
  line-height: 1.7;
  letter-spacing: -0.01em;
  font-weight: 500;
}
.conviction-line .em {
  color: var(--green);
  font-weight: 700;
}

/* ---- Loss aversion 박스 (5년 후 시나리오) ---- */
.future-scenario {
  margin: 56px auto 0;
  padding: 36px;
  max-width: 720px;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border-soft);
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.04) 0%, rgba(29, 185, 84, 0.04) 100%);
}
.future-scenario-title {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  color: #fff;
  margin: 0 0 24px;
  letter-spacing: -0.02em;
  text-align: center;
}
.future-scenario-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  text-align: center;
}
.future-scenario-side {
  padding: 20px;
  border-radius: var(--radius-xl);
}
.future-scenario-side.bad {
  background: rgba(248, 113, 113, 0.06);
  border: 1px solid rgba(248, 113, 113, 0.2);
}
.future-scenario-side.good {
  background: rgba(29, 185, 84, 0.06);
  border: 1px solid rgba(29, 185, 84, 0.25);
}
.future-scenario-label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 8px;
}
.future-scenario-side.bad .future-scenario-label { color: rgb(248, 113, 113); }
.future-scenario-side.good .future-scenario-label { color: var(--green); }
.future-scenario-result {
  font-size: clamp(16px, 1.6vw, 18px);
  color: #fff;
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
  letter-spacing: -0.015em;
}
.future-scenario-question {
  text-align: center;
  font-size: clamp(15px, 1.5vw, 17px);
  color: var(--text-ccc);
  margin-top: 24px;
  font-weight: 500;
}
.future-scenario-question strong { color: var(--green); }

/* ---- 최종 CTA 강화 (commit + reciprocity) ---- */
.foot-banner-commit {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
}
.foot-banner-commit strong { color: #fff; font-weight: 600; }
.foot-banner-free {
  display: inline-block;
  margin: 0 0 20px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(29, 185, 84, 0.12);
  border: 1px solid rgba(29, 185, 84, 0.4);
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* ===============================================================
   v2.0.5 — decoration 제거 + 본문 폰트 ↑ + ANSWER REVEAL + 정렬 방어
   =============================================================== */

/* ---- 본문 narrative 폰트 키움 (집중도 ↑) ---- */
.speaker-body,
.speaker-section .speaker-body {
  font-size: clamp(18px, 2.2vw, 24px) !important;
  line-height: 1.85 !important;
  color: var(--text-ccc);
}
.speaker-heading,
.speaker-section .speaker-heading {
  font-size: clamp(28px, 4vw, 44px) !important;
  line-height: 1.25 !important;
}

/* conviction-line 톤다운 (장식 제거, 본문 같이) */
.conviction-line {
  margin: 32px auto 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  font-size: clamp(16px, 1.8vw, 19px) !important;
  color: var(--text-888) !important;
  text-align: left;
  max-width: 580px;
  font-weight: 400 !important;
  font-style: italic;
  border-left: 2px solid var(--green) !important;
  padding-left: 16px !important;
}

/* future-scenario 컴팩트 (boxed feel 제거) */
.future-scenario {
  margin: 48px auto 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  text-align: center;
}
.future-scenario-title {
  font-size: clamp(16px, 1.6vw, 18px) !important;
  color: var(--text-888) !important;
  margin-bottom: 16px !important;
}
.future-scenario-grid {
  gap: 12px !important;
}
.future-scenario-side {
  padding: 16px !important;
  border-radius: var(--radius-lg) !important;
}
.future-scenario-question {
  font-size: clamp(16px, 1.8vw, 19px) !important;
  margin-top: 20px !important;
}

/* foot-banner-free 톤다운 */
.foot-banner-free {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  font-size: 12px !important;
  color: rgba(29, 185, 84, 0.8) !important;
  margin-bottom: 16px !important;
}
.foot-banner-commit {
  margin-top: 24px !important;
  padding-top: 20px !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

/* ---- ANSWER REVEAL (빈칸 회수 모먼트) ---- */
.answer-reveal-v2 {
  padding: 120px 24px 100px;
  text-align: center;
  background: var(--bg);
  position: relative;
}
.answer-reveal-v2::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 1px; height: 56px;
  background: linear-gradient(180deg, transparent, var(--green));
}
.answer-reveal-v2-inner {
  max-width: var(--max-4xl);
  margin: 0 auto;
}
.answer-reveal-v2-cue {
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--text-888);
  margin: 0 0 32px;
  letter-spacing: -0.005em;
}
.answer-reveal-v2-h2 {
  font-size: clamp(40px, 7vw, 84px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.05;
  color: #fff;
  margin: 0 0 28px;
}
.answer-reveal-v2-h2 .em {
  background: linear-gradient(90deg, var(--green), var(--green-mid));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.answer-reveal-v2-tail {
  font-size: clamp(16px, 1.6vw, 18px);
  color: var(--text-ccc);
  line-height: 1.75;
  max-width: 540px;
  margin: 0 auto;
}

/* ---- v2.0.32 — Hero 2단 split (헤더 64px 침범 방지, 우측 fixed 여백) ---- */
.hero-tease {
  position: relative;
  min-height: 100vh;
  padding-top: 64px;  /* fixed 헤더 아래로 시작 */
  background: #000;
  overflow: hidden;
  box-sizing: border-box;
}
.hero-tease-container {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 64px);
  display: grid;
  grid-template-columns: 7fr 5fr;
}
.hero-tease-side {
  position: relative;
  z-index: 2;
  /* 좌측 padding: 헤더 .nav-inner 로고와 동일한 X 좌표로 정렬 */
  padding-left: max(24px, calc((100vw - var(--max-6xl)) / 2 + 24px));
  padding-right: 56px;
  padding-top: 56px;
  padding-bottom: 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: calc(100vh - 64px);
  background:
    radial-gradient(ellipse 55% 50% at 30% 50%, rgba(29, 185, 84, 0.22), transparent 70%),
    radial-gradient(circle at 18% 85%, rgba(29, 185, 84, 0.1), transparent 55%);
}
.hero-tease-thesis {
  font-size: clamp(34px, 4.4vw, 60px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: #fff;
  margin: 0;
  word-break: keep-all;
}
.hero-tease-thesis mark {
  background: linear-gradient(180deg, transparent 0%, transparent 58%, rgba(29, 185, 84, 0.42) 58%, rgba(29, 185, 84, 0.42) 92%, transparent 92%);
  color: #fff;
  font-weight: 700;
  padding: 0 6px;
  border-radius: 2px;
}

/* 본문 (월세/검색 비유 2단락) */
.hero-tease-body {
  font-size: clamp(15px, 1.55vw, 18px);
  color: var(--text-ccc);
  line-height: 1.85;
  letter-spacing: -0.005em;
  margin: 0;
  max-width: 580px;
}
.hero-tease-body + .hero-tease-body {
  margin-top: 14px;
}
.hero-tease-body .em {
  color: var(--green);
  font-weight: 600;
}

/* Postify 등장 (resolve) — 강조 + 서브 라인 */
.hero-tease-resolve {
  margin: 36px 0 0;
  font-size: clamp(17px, 1.8vw, 21px);
  color: #fff;
  line-height: 1.55;
  letter-spacing: -0.01em;
  font-weight: 600;
  max-width: 580px;
}
.hero-tease-resolve strong {
  color: #fff;
  font-weight: 700;
  display: inline-block;
  border-bottom: 2px solid var(--green);
  padding-bottom: 2px;
}
.hero-tease-resolve-sub {
  display: block;
  margin-top: 14px;
  font-size: clamp(14px, 1.5vw, 16px);
  color: var(--text-ccc);
  font-weight: 400;
  line-height: 1.7;
}
.hero-tease-resolve .em {
  color: var(--green);
  font-weight: 700;
}

/* 3분 약속 (promise) — 작게, italic, hairline border-top */
.hero-tease-promise {
  margin: 32px 0 28px;
  max-width: 580px;
  font-size: clamp(13px, 1.35vw, 14px);
  color: var(--text-aaa);
  font-style: italic;
  line-height: 1.75;
  letter-spacing: 0.005em;
  padding-top: 24px;
  border-top: 1px solid rgba(29, 185, 84, 0.22);
}
.hero-tease-promise strong { color: #fff; font-weight: 700; font-style: normal; }
.hero-tease-promise .em { color: var(--green); font-weight: 600; font-style: normal; }

/* CTA */
.hero-tease-cta {
  margin-top: 4px;
}

/* ---- v2.0.36 — Hero Story: 가운데 후킹 + SVG 그래프 (광고 vs 검색) ---- */
.hero-story {
  background: var(--bg-base);
  padding: 140px 24px 160px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.hero-story-inner {
  max-width: 880px;
  margin: 0 auto;
}

/* 다리 (브리지) — 헤드와 헤딩 사이 호흡 */
.hero-story-bridge {
  font-size: clamp(14px, 1.4vw, 16px);
  color: var(--text-aaa);
  font-style: italic;
  line-height: 1.75;
  margin: 0 auto 28px;
  max-width: 720px;
  letter-spacing: -0.005em;
  word-break: keep-all;
}
.hero-story-bridge strong {
  color: var(--text-ccc);
  font-weight: 600;
  font-style: normal;
}

/* 큰 후킹 헤딩 — 헤드카피 "공통점이 있습니다"의 답 */
.hero-story-headline {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.3;
  color: #fff;
  margin: 0 0 64px;
  word-break: keep-all;
}
.hero-story-headline .em {
  color: var(--green);
  font-weight: 800;
}

/* 그래프 카드 */
.hero-story-chart {
  position: relative;
  margin: 0 auto;
  padding: 36px 32px 28px;
  background: linear-gradient(180deg, rgba(29, 185, 84, 0.04), rgba(0, 0, 0, 0.2));
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
}
.hero-story-chart-legend {
  display: flex;
  justify-content: center;
  gap: 36px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-ccc);
  letter-spacing: 0.02em;
  font-weight: 500;
}
.chart-legend-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
}
.chart-legend-dot.ad {
  background: var(--amber);
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.55);
}
.chart-legend-dot.search {
  background: var(--green);
  box-shadow: 0 0 12px rgba(29, 185, 84, 0.7);
}

.hero-story-chart svg {
  width: 100%;
  height: auto;
  display: block;
}
.chart-grid {
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 1;
}
.chart-line-ad {
  fill: none;
  stroke: var(--amber);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.95;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.35));
}
.chart-line-search {
  fill: none;
  stroke: var(--green);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(29, 185, 84, 0.45));
}
.chart-area-search {
  fill: url(#searchGradient);
}
.chart-endlabel {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.chart-endlabel.ad { fill: var(--amber); }
.chart-endlabel.search { fill: var(--green); }
.chart-axis-label {
  fill: var(--text-888);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.55;
}

/* SVG line drawing 애니메이션 — .reveal.in 시점에 트리거 */
.hero-story-chart .chart-line-ad,
.hero-story-chart .chart-line-search,
.hero-story-chart .chart-area-search,
.hero-story-chart .chart-endlabel {
  opacity: 0;
}
.hero-story-chart.in .chart-line-ad {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  opacity: 0.85;
  animation: drawLine 1.6s ease-out 0.3s forwards;
}
.hero-story-chart.in .chart-line-search {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  opacity: 1;
  animation: drawLine 2s ease-out 0.8s forwards;
}
.hero-story-chart.in .chart-area-search {
  animation: fadeArea 1.0s ease-out 0.9s forwards;
}
.hero-story-chart.in .chart-endlabel {
  animation: fadeLabel 0.6s ease-out 2.0s forwards;
}
.hero-story-chart.in .chart-endlabel.search {
  animation-delay: 2.2s;
}
@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes fadeArea {
  from { opacity: 0; }
  to { opacity: 0.7; }
}
@keyframes fadeLabel {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 캡션 (그래프 카드 안쪽 하단) */
.hero-story-chart-caption {
  font-size: 14px;
  color: var(--text-ccc);
  margin: 24px auto 0;
  max-width: 640px;
  line-height: 1.75;
  letter-spacing: -0.005em;
}
.hero-story-chart-caption strong {
  color: var(--green);
  font-weight: 700;
}

/* 본문 흐름 — 그래프 다음 단락들 */
.hero-story-inner .hero-tease-resolve {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 80px;
  font-size: clamp(18px, 1.9vw, 23px);
  text-align: center;
}
.hero-story-inner .hero-tease-promise {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(13px, 1.4vw, 15px);
  text-align: center;
}
.hero-story-inner .hero-tease-cta {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

@media (max-width: 640px) {
  .hero-story { padding: 80px 20px 100px; }
  .hero-story-headline { margin-bottom: 44px; }
  .hero-story-chart { padding: 28px 16px 20px; }
  .hero-story-chart-legend { gap: 20px; margin-bottom: 16px; }
  .hero-story-inner .hero-tease-resolve { margin-top: 56px; }
}

/* ---- v2.0.42 — 분기 섹션 (3 페르소나 카드) ---- */
.branching {
  background: var(--bg-base);
  padding: 140px 24px 160px;
  border-bottom: 1px solid var(--border);
}
.branching-inner {
  max-width: var(--max-6xl);
  margin: 0 auto;
}
.branching-intro {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 80px;
}
.branching-intro-callback {
  font-size: 13px;
  color: var(--green);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.branching-intro-title {
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.3;
  color: #fff;
  margin: 0 0 24px;
  word-break: keep-all;
}
.branching-intro-sub {
  font-size: clamp(15px, 1.6vw, 17px);
  color: var(--text-ccc);
  line-height: 1.75;
  margin: 0;
  word-break: keep-all;
}
.branching-intro-sub strong {
  color: #fff;
  font-weight: 600;
}
.branching-intro-sub .em {
  color: var(--green);
  font-weight: 600;
}
.branching-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.persona-card {
  background: var(--card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-2xl);
  padding: 36px 28px 32px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.persona-card:hover {
  border-color: rgba(29, 185, 84, 0.42);
  transform: translateY(-3px);
}
.persona-card-num {
  font-size: 13px;
  color: var(--green);
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0 0 4px;
}
.persona-card-label {
  font-size: 11px;
  color: var(--text-aaa);
  letter-spacing: 0.08em;
  font-weight: 500;
  margin: 0 0 28px;
  text-transform: uppercase;
}
.persona-card-title {
  font-size: clamp(20px, 1.85vw, 22px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: #fff;
  margin: 0 0 24px;
}
.persona-card-quote {
  font-size: 14px;
  font-style: italic;
  color: var(--text-ccc);
  line-height: 1.65;
  margin: 0 0 22px;
  padding: 10px 0 10px 14px;
  border-left: 2px solid rgba(29, 185, 84, 0.45);
  background: linear-gradient(90deg, rgba(29,185,84,0.04), transparent 60%);
}
.persona-card-body {
  font-size: 14px;
  color: var(--text-ccc);
  line-height: 1.75;
  margin: 0 0 28px;
  flex: 1;
}
.persona-card-body strong { color: #fff; font-weight: 600; }
.persona-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  margin-top: auto;
  transition: gap 0.2s ease;
}
.persona-card-cta:hover { gap: 12px; }
.persona-card-cta svg { transition: transform 0.2s ease; }
.persona-card-cta:hover svg { transform: translateX(2px); }
@media (max-width: 960px) {
  .branching-cards { grid-template-columns: 1fr; gap: 20px; }
  .branching-intro { margin-bottom: 56px; }
}
@media (max-width: 640px) {
  .branching { padding: 80px 20px 100px; }
}
.hero-tease-scroll-indicator {
  position: absolute;
  bottom: 56px;
  left: max(24px, calc((100vw - var(--max-6xl)) / 2 + 24px));
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-aaa);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-weight: 500;
}
.hero-tease-scroll-indicator::after {
  content: '';
  display: inline-block;
  width: 36px;
  height: 1px;
  background: var(--text-aaa);
  opacity: 0.6;
}

/* 우측 이미지 영역 (grid item, ken-burns 컨테이너) */
.hero-tease-photo {
  position: relative;
  z-index: 1;
  min-height: calc(100vh - 64px - 40px);
  overflow: hidden;
  /* 우측 여백 — 모든 화면에서 최소 40px, 큰 모니터에선 더 크게 */
  margin-right: max(40px, calc((100vw - 1600px) / 2 + 24px));
  /* 위쪽 여백 — 메뉴바와 시각 분리 */
  margin-top: 40px;
}
.hero-tease-photo .ken-burns {
  width: 100%; height: 100%;
  /* Hero 전용 — 항상 줌인 방향 + opacity fade로 reset 자연스럽게 */
  animation: kenBurnsZoomIn 22s ease-out infinite;
}
@keyframes kenBurnsZoomIn {
  0%   { transform: scale(1.02); opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { transform: scale(1.18); opacity: 0; }
}
.hero-tease-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-tease-photo-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #0a0a0a 0%, #111 50%, #1a1a1a 100%);
}
.hero-tease-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 35%, transparent 70%);
  z-index: 2;
  pointer-events: none;
}

/* 모바일 stack: 사진 위, 텍스트 아래 */
@media (max-width: 960px) {
  .hero-tease { min-height: auto; }
  .hero-tease-container {
    grid-template-columns: 1fr;
    max-width: none;
    min-height: auto;
  }
  .hero-tease-photo {
    min-height: 48vh;
    order: -1;
  }
  .hero-tease-photo::after {
    background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.55) 100%);
  }
  .hero-tease-side {
    min-height: auto;
    padding: 56px 24px 88px;
    justify-content: flex-start;
    align-items: flex-start;
    background:
      radial-gradient(ellipse 90% 60% at 20% 30%, rgba(29, 185, 84, 0.18), transparent 70%);
  }
  .hero-tease-thesis {
    font-size: clamp(28px, 7.6vw, 40px);
    line-height: 1.3;
  }
  .hero-tease-scroll-indicator {
    bottom: 28px;
    left: 24px !important;
    font-size: 10.5px;
  }
  .hero-tease-photo {
    margin-right: 0;
  }
}

/* ---- 정렬 방어 추가 ---- */
.problem-list { width: 100%; }
.problem-item { width: 100%; }

/* ---- v2.0.7 — speaker 섹션 정렬 통일 (가운데) + narrative 인용구 박스 ---- */
.speaker-section .speaker-inner {
  text-align: center;
  max-width: 720px;
}
.speaker-section .speaker-quote-mark {
  display: block;
  text-align: center;
}
.speaker-section .speaker-heading {
  text-align: center;
}
.speaker-section .problem-list {
  max-width: 640px;
  margin: 32px auto 0;
  text-align: left;
}
.speaker-section .problem-list + .speaker-body {
  margin-top: 32px;
  text-align: center;
  font-size: clamp(15px, 1.5vw, 17px) !important;
  color: var(--text-888) !important;
  font-style: italic;
}

/* narrative 인용구 박스 (story-quote) — "저도 그랬어요" 등 1인칭 narrative용 */
.story-quote {
  max-width: 720px;
  margin: 40px auto 0;
  padding: 48px 56px 40px;
  background: var(--card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-2xl);
  position: relative;
  text-align: left;
}
.story-quote::before {
  content: '"';
  position: absolute;
  top: -8px;
  left: 32px;
  font-size: 96px;
  color: var(--green);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1;
  opacity: 0.4;
}
.story-quote-body {
  font-size: clamp(17px, 1.7vw, 20px);
  color: var(--text-ccc);
  line-height: 1.9;
  margin: 0 0 24px;
  letter-spacing: -0.01em;
}
.story-quote-body strong { color: #fff; font-weight: 600; }
.story-quote-body + .story-quote-body { margin-top: 0; }
.story-quote-punch {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
  letter-spacing: -0.02em;
  margin: 32px 0 8px;
}
.story-quote-punch .em { color: var(--green); }
.story-quote-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  margin-top: 32px;
}
.story-quote-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--green-mid));
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.story-quote-author-name {
  font-size: 13px;
  color: var(--text-888);
  letter-spacing: -0.005em;
}
.story-quote-author-name strong { color: #fff; font-weight: 600; }

@media (max-width: 640px) {
  .story-quote { padding: 36px 28px 32px; }
  .story-quote::before { font-size: 72px; left: 20px; }
}

/* ---- v2.0.11 — Persona sequenced journey (시간 흐름) ---- */
.persona-journey {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 620px;
  margin: 40px auto 0;
  text-align: left;
}
.persona-item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 28px;
  background: var(--card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  transition: border-color 0.3s, transform 0.3s;
}
.persona-item:hover {
  border-color: var(--green);
  transform: translateX(4px);
}
.persona-stage {
  align-self: flex-start;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 700;
  padding: 5px 12px;
  background: rgba(29, 185, 84, 0.12);
  border: 1px solid rgba(29, 185, 84, 0.3);
  border-radius: 999px;
}
.persona-text {
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--text-ccc);
  line-height: 1.6;
  margin: 0;
  letter-spacing: -0.005em;
}
.persona-text strong {
  color: #fff;
  font-weight: 600;
}

/* Connector between cards (그래서 → 그러다 → 결국) */
.persona-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
}
.persona-connector-line {
  width: 1px;
  height: 20px;
  background: linear-gradient(180deg, var(--border-soft), var(--green));
}
.persona-connector-text {
  font-size: 12px;
  color: var(--text-555);
  letter-spacing: 0.1em;
  font-weight: 600;
}
.persona-connector-line-bottom {
  width: 1px;
  height: 12px;
  background: linear-gradient(180deg, var(--green), var(--border-soft));
}

.persona-bridge {
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--text-888);
  text-align: center;
  margin: 32px auto 0;
  max-width: 480px;
  font-style: italic;
  line-height: 1.7;
}
.persona-bridge .em {
  color: var(--green);
  font-weight: 600;
  font-style: normal;
}

/* Journey 결론 박스 (대행사 선택의 중요성) */
.journey-conclusion {
  margin: 48px auto 0;
  padding: 32px 36px;
  max-width: 620px;
  background: linear-gradient(135deg, var(--card) 0%, rgba(29, 185, 84, 0.06) 100%);
  border: 1px solid rgba(29, 185, 84, 0.3);
  border-left: 3px solid var(--green);
  border-radius: var(--radius-2xl);
  text-align: left;
}
.journey-conclusion-body {
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--text-ccc);
  line-height: 1.8;
  margin: 0;
  letter-spacing: -0.005em;
}
.journey-conclusion-body strong { color: #fff; font-weight: 600; }
.journey-conclusion-punch {
  font-size: clamp(17px, 1.8vw, 20px);
  color: #fff;
  font-weight: 700;
  margin: 18px 0 0;
  line-height: 1.5;
  letter-spacing: -0.015em;
}
.journey-conclusion-punch .em {
  background: linear-gradient(90deg, var(--green), var(--green-mid));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (max-width: 640px) {
  .journey-conclusion { padding: 24px 24px; }
}

/* ---- v2.0.13 — 심플 plain list (페르소나 카드 X) ---- */
.pain-simple-list {
  list-style: none;
  padding: 0;
  margin: 40px auto 0;
  max-width: 560px;
  text-align: left;
}
.pain-simple-list li {
  padding: 18px 0 18px 28px;
  font-size: clamp(16px, 1.7vw, 19px);
  color: var(--text-ccc);
  line-height: 1.6;
  border-bottom: 1px solid var(--border);
  position: relative;
  letter-spacing: -0.005em;
}
.pain-simple-list li:last-child { border-bottom: none; }
.pain-simple-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 28px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
}
.pain-simple-list li strong {
  color: #fff;
  font-weight: 600;
}

/* ---- v2.0.14 — Intro narrative (Hero → Pain 사이 일반론) ---- */
.intro-narrative {
  padding: 112px 24px 96px;
  background: var(--bg);
  text-align: center;
  position: relative;
}
.intro-narrative::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 1px; height: 56px;
  background: linear-gradient(180deg, transparent, var(--green));
}
.intro-narrative-inner {
  max-width: 680px;
  margin: 0 auto;
}
.intro-narrative-body {
  font-size: clamp(17px, 1.9vw, 21px);
  color: var(--text-ccc);
  line-height: 1.9;
  margin: 0 0 24px;
  letter-spacing: -0.005em;
}
.intro-narrative-body:last-child { margin-bottom: 0; }
.intro-narrative-body strong { color: #fff; font-weight: 600; }
.intro-narrative-punch {
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  letter-spacing: -0.02em;
  margin: 40px 0 0;
}
.intro-narrative-punch .em {
  background: linear-gradient(90deg, var(--green), var(--green-mid));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* 운영이 정확히 무엇인지 풀어주는 detail 라인 */
.intro-narrative-detail {
  font-size: clamp(13px, 1.45vw, 15px);
  color: var(--text-aaa);
  font-style: italic;
  line-height: 1.85;
  letter-spacing: 0.005em;
  margin: 28px 0 0;
  padding-left: 16px;
  border-left: 2px solid rgba(29, 185, 84, 0.28);
}

/* ---- Bridge — 일반론과 페인 사이의 '상상 자극' 다리 ---- */
.bridge-imagine {
  padding: 96px 24px;
  background: var(--bg-base);
  text-align: center;
  position: relative;
}
.bridge-imagine::before,
.bridge-imagine::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: rgba(29, 185, 84, 0.35);
  margin: 0 auto;
}
.bridge-imagine::before { margin-bottom: 48px; }
.bridge-imagine::after  { margin-top: 48px; }
.bridge-imagine-inner {
  max-width: 720px;
  margin: 0 auto;
}
.bridge-imagine-lead {
  font-size: clamp(14px, 1.4vw, 15px);
  color: var(--text-aaa);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 28px;
}
.bridge-imagine-question {
  font-size: clamp(21px, 2.6vw, 28px);
  font-weight: 400;
  color: var(--text-ccc);
  line-height: 1.75;
  letter-spacing: -0.01em;
  margin: 0;
}
.bridge-imagine-question + .bridge-imagine-question {
  margin-top: 36px;
}
.bridge-imagine-question .em {
  color: var(--green);
  font-weight: 600;
}
.bridge-imagine-question.is-thesis {
  color: #fff;
  font-weight: 500;
  font-size: clamp(22px, 2.8vw, 30px);
}
.bridge-imagine-question.is-thesis mark {
  background: linear-gradient(180deg, transparent 0%, transparent 58%, rgba(29, 185, 84, 0.38) 58%, rgba(29, 185, 84, 0.38) 92%, transparent 92%);
  color: #fff;
  font-weight: 700;
  padding: 0 4px;
  border-radius: 2px;
}
@media (max-width: 640px) {
  .bridge-imagine { padding: 72px 20px; }
  .bridge-imagine::before { margin-bottom: 36px; }
  .bridge-imagine::after  { margin-top: 36px; }
}

/* ---- Problem 섹션 (재사용 pain-section과 통합) ---- */
.problem-section {
  padding: 120px 24px;
  background: var(--bg-alt);
  border-top: 1px solid rgba(29, 185, 84, 0.08);
}
.problem-inner {
  max-width: var(--max-4xl);
  margin: 0 auto;
}
.problem-heading {
  font-size: clamp(28px, 4.5vw, 48px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 48px;
  text-align: center;
}
.problem-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
  margin: 0 auto;
}
.problem-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 28px;
  background: var(--card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  transition: border-color 0.3s;
}
.problem-item:hover { border-color: var(--border-soft); }
.problem-item-mark {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(248, 113, 113, 0.12);
  color: rgb(248, 113, 113);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 14px;
}
.problem-item-text {
  font-size: 15px;
  color: var(--text-ccc);
  line-height: 1.7;
  padding-top: 2px;
}

/* ---- Solution 섹션 (Postify 답) ---- */
.solution-section {
  padding: 120px 24px;
  background: var(--bg);
}
.solution-inner {
  max-width: var(--max-5xl);
  margin: 0 auto;
}
.solution-heading {
  font-size: clamp(28px, 4.5vw, 56px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 56px;
  text-align: center;
}
.solution-heading .accent {
  background: linear-gradient(90deg, var(--green), var(--green-mid));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.solution-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) { .solution-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .solution-grid { grid-template-columns: repeat(4, 1fr); } }
.solution-item {
  padding: 28px 24px;
  background: var(--card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  transition: transform 0.3s, border-color 0.3s;
}
.solution-item:hover {
  transform: translateY(-4px);
  border-color: var(--green);
}
.solution-num {
  font-size: 32px;
  font-weight: 600;
  color: var(--green);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 16px;
}
.solution-title {
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.solution-desc {
  font-size: 13px;
  color: var(--text-888);
  line-height: 1.7;
}

/* ---- Service Split — 메인(큰) + 서브(작은) ---- */
.service-split-section {
  padding: 120px 24px;
  background: var(--bg-alt);
}
.service-split-heading {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  text-align: center;
  color: #fff;
  margin: 0 0 16px;
  letter-spacing: -0.035em;
}
.service-split-sub {
  text-align: center;
  color: var(--text-888);
  font-size: 16px;
  margin: 0 0 56px;
}
.service-split-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: var(--max-6xl);
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .service-split-grid {
    grid-template-columns: 2fr 1fr;
    gap: 24px;
  }
}
.service-card {
  display: flex;
  flex-direction: column;
  padding: 48px 40px;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border-soft);
  background: var(--card);
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, border-color 0.3s ease;
  position: relative;
}
.service-card:hover { transform: translateY(-4px); border-color: var(--green); }
.service-card.main {
  background: linear-gradient(135deg, var(--card) 0%, rgba(29, 185, 84, 0.08) 100%);
  border-color: rgba(29, 185, 84, 0.3);
}
.service-card-badge {
  position: absolute;
  top: 24px; right: 24px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.service-card.main .service-card-badge {
  background: var(--green);
  color: #000;
}
.service-card.sub .service-card-badge {
  background: var(--card);
  border: 1px solid var(--border-soft);
  color: var(--text-888);
}
.service-card-tag {
  font-size: 12px;
  color: var(--text-888);
  letter-spacing: 0.05em;
  font-weight: 500;
  margin-bottom: 16px;
  text-transform: uppercase;
}
.service-card-title {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  color: #fff;
  margin: 0 0 16px;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.service-card.main .service-card-title { color: var(--green); }
.service-card-desc {
  font-size: 15px;
  color: var(--text-ccc);
  line-height: 1.7;
  margin: 0 0 24px;
}
.service-card-list {
  margin-bottom: 32px;
  flex: 1;
}
.service-card-list li {
  padding: 6px 0;
  font-size: 14px;
  color: var(--text-ccc);
  position: relative;
  padding-left: 20px;
}
.service-card-list li::before {
  content: '·';
  position: absolute;
  left: 8px;
  color: var(--green);
  font-weight: 700;
}
.service-card-cta {
  font-size: 15px;
  font-weight: 600;
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  transition: transform 0.3s;
}
.service-card:hover .service-card-cta { transform: translateX(4px); }

/* ---- Trust 섹션 (운영자 약력, 기존 founder-card 톤다운 버전) ---- */
.trust-section {
  padding: 120px 24px;
  background: var(--bg);
  text-align: center;
}
.trust-inner {
  max-width: var(--max-4xl);
  margin: 0 auto;
}
.trust-heading {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 32px;
}
.trust-body {
  font-size: clamp(16px, 1.8vw, 19px);
  color: var(--text-ccc);
  line-height: 1.8;
  max-width: 640px;
  margin: 0 auto 40px;
}
.trust-creds {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center;
}

/* ---- WordPress SEO 섹션 ---- */
.wpseo-section {
  padding: 120px 24px;
  background: var(--bg-alt);
  position: relative;
  overflow: hidden;
}
.wpseo-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(29, 185, 84, 0.04) 100%);
  pointer-events: none;
}
.wpseo-inner {
  max-width: var(--max-5xl);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.wpseo-tag {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--green);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.wpseo-heading {
  font-size: clamp(30px, 5vw, 56px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 24px;
}
.wpseo-heading .accent {
  background: linear-gradient(90deg, var(--green), var(--green-mid));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wpseo-desc {
  font-size: clamp(16px, 1.8vw, 18px);
  color: var(--text-ccc);
  line-height: 1.8;
  max-width: 640px;
  margin: 0 0 48px;
}
.wpseo-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 56px;
}
@media (min-width: 768px) { .wpseo-features { grid-template-columns: repeat(2, 1fr); } }
.wpseo-feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  background: var(--card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
}
.wpseo-feature-check {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--green);
  color: #000;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 700;
  margin-top: 1px;
}
.wpseo-feature-text {
  font-size: 14px;
  color: var(--text-ccc);
  line-height: 1.6;
}
.wpseo-feature-text strong { color: #fff; }

/* 소유권 강조 박스 */
.owner-policy {
  padding: 36px;
  border-radius: var(--radius-2xl);
  background: linear-gradient(135deg, rgba(29, 185, 84, 0.12) 0%, rgba(86, 245, 161, 0.05) 100%);
  border: 1px solid rgba(29, 185, 84, 0.4);
  text-align: center;
}
.owner-policy-quote {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
  letter-spacing: -0.03em;
  line-height: 1.3;
}
.owner-policy-quote .em {
  background: linear-gradient(90deg, var(--green), var(--green-mid));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.owner-policy-desc {
  font-size: 14px;
  color: var(--text-ccc);
  line-height: 1.7;
  margin: 0;
}

/* ---- Final CTA (foot-banner 그대로 사용, 새 카피만) ---- */

/* ===============================================================
   v1.9.0 — 3 동등 서비스 카드 (네이버 / 워드프레스 / 앱)
   =============================================================== */

.service-trio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: var(--max-6xl);
  margin: 0 auto;
}
@media (min-width: 768px) {
  .service-trio-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
.service-trio-card {
  display: flex;
  flex-direction: column;
  padding: 40px 32px;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border-soft);
  background: var(--card);
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
  position: relative;
  overflow: hidden;
}
.service-trio-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.service-trio-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-hard);
}
.service-trio-card:hover::before { transform: scaleX(1); }

.service-trio-card.naver::before { background: linear-gradient(90deg, #03c75a, #1db954); }
.service-trio-card.wordpress::before { background: linear-gradient(90deg, #21759b, #1db954); }
.service-trio-card.app::before { background: linear-gradient(90deg, var(--green), var(--amber)); }

.service-trio-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: rgba(29, 185, 84, 0.1);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}
.service-trio-card.naver .service-trio-icon { background: rgba(3, 199, 90, 0.12); color: #03c75a; }
.service-trio-card.wordpress .service-trio-icon { background: rgba(33, 117, 155, 0.15); color: #4ba8d8; }

.service-trio-channel {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-555);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.service-trio-title {
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.service-trio-sub {
  font-size: 13px;
  color: var(--text-888);
  margin-bottom: 24px;
  letter-spacing: -0.005em;
}
.service-trio-desc {
  font-size: 14px;
  color: var(--text-ccc);
  line-height: 1.7;
  margin: 0 0 24px;
  flex: 1;
}
.service-trio-meta {
  font-size: 12px;
  color: var(--text-666);
  margin-bottom: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  letter-spacing: -0.005em;
}
.service-trio-cta {
  font-size: 14px;
  font-weight: 600;
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.3s;
  margin-top: auto;
}
.service-trio-card:hover .service-trio-cta { transform: translateX(4px); }
.service-trio-card.app .service-trio-cta { color: var(--amber); }

/* ============================================================
 * v3 새 nav (2026-05-31 — 모든 페이지 통일)
 * 기존 .nav-inner/.nav-logo 룰은 deprecated (markup 안 씀)
 * .nav-in / .brand / .nav-tog / .nav-mob 새 클래스 사용
 * ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: rgba(11, 12, 11, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(235, 233, 225, 0.06);
  transition: background .3s;
}
.nav.on { background: rgba(11, 12, 11, 0.92); }
.nav-in {
  max-width: 1440px;
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 16px;
  text-decoration: none;
  color: #EAE8E0;
}
.brand .mk {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #1ED760;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #06210F;
}
.brand .mk svg { width: 14px; height: 14px; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
}
.nav-links a {
  font-size: 13.5px;
  color: #979C92;
  text-decoration: none;
  transition: color .2s;
}
.nav-links a:hover { color: #EAE8E0; }
.nav-links .cta {
  color: #1ED760;
  font-weight: 600;
}
.nav-tog {
  display: none;
  background: none;
  border: none;
  color: #EAE8E0;
  padding: 6px;
  cursor: pointer;
}
.nav-tog svg { width: 23px; height: 23px; }
.nav-mob {
  display: none;
  position: fixed;
  inset: 60px 0 auto 0;
  z-index: 49;
  background: rgba(11, 12, 11, 0.97);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(235, 233, 225, 0.09);
  padding: 6px 0;
}
.nav-mob.open { display: block; }
.nav-mob a {
  display: block;
  padding: 13px 32px;
  font-size: 14.5px;
  color: #979C92;
  text-decoration: none;
  border-bottom: 1px solid rgba(235, 233, 225, 0.06);
}
.nav-mob a:last-child { border-bottom: none; }
@media (max-width: 880px) {
  .nav-links { display: none; }
  .nav-tog { display: flex; }
  .nav-in { padding: 16px 20px; }
}