/**
 * /new 전용 캔바 스타일 CSS — "어스톤(Earth Tones)" 테마.
 *
 * 무엇: 흙·나무 자연 색감(우드브라운·린넨·탠) 기반 따뜻한 뮤트 SaaS 디자인 시스템.
 *       히어로/CTA 등 화이트 텍스트가 얹히는 "다크 영역"은 딥브라운 그라데이션.
 * 왜:   2026-06-16 철륜님 확정 — 사이트 전체 어스톤 적용(색만 교체, 레이아웃·기능 불변).
 *       뮤트 톤 가독성 리스크 → 텍스트/배경 대비 전부 WCAG AA(≥4.5:1) 보정.
 * 격리: .new-* 네임스페이스로 기존 사이트(_admin.css·_user_light.css)와 충돌 0.
 * 롤백: 원본 캔바 토큰 백업 = new/css/canva-saas.css.earthtone-bak.
 * 주의: home.php 는 자체 .new-home-organic(그린) 스코프로 이 토큰을 안 씀 — 영향 없음.
 * 연관: app/Views/new/home.php, /home/d/public_html/new/README.md §5
 */

:root {
  /* 어스톤 — 화이트 텍스트가 얹히는 곳엔 딥워드(#7D6749, white=5.37:1), 라이트면 위 텍스트는 #3E2C1C */
  --new-primary: #7D6749;        /* 우드브라운(딥) — 버튼 채움/액티브. 원본 #7D6749 */
  --new-primary-hover: #6F5B43;  /* hover 더 진하게(white=6.45:1). 원본 호버 없음 */
  --new-secondary: #8B7355;      /* 우드브라운 — 강조 텍스트/뱃지. 원본 #8B7355 */
  --new-tan: #D2B48C;            /* 탠 — 보조 강조(딥브라운 배경 위 뱃지). 신규 */
  /* 히어로/CTA: 미드 우드톤 그라데이션 — 딥브라운(#5A4632→#3E2C1C)이 "검정처럼" 과해
     2026-06-16 철륜님 지시로 밝게. 화이트 텍스트 유지(밝은 스톱 #856E4C white=4.85:1, 어두운 #6F5B43 white=6.45:1, 둘 다 AA≥4.5). */
  --new-gradient: linear-gradient(135deg, #856E4C 0%, #6F5B43 100%);
  --new-accent: #6F5B43;         /* 미드워드. 원본 #2A89DA */
  --new-bg: #FAF0E6;             /* 린넨 페이지 배경. 원본 #FFFFFF */
  --new-surface: #F5EBDD;        /* 웜화이트 표면/카드. 원본 #F9FAFB */
  --new-border: #C4B5A0;         /* 대지 테두리/구분선. 원본 #E5E7EB */
  --new-heading: #3E2C1C;        /* 다크브라운 제목(린넨 위 11.8:1). 원본 #0F172A */
  --new-body: #6B5844;           /* 미드브라운 본문(린넨 위 6:1). 원본 #475569 */
  --new-muted: #735F4A;          /* 뮤트 보조텍스트(--new-surface 위 5.14:1+, AA). 원본 #94A3B8 */
}

/* ─── 리셋 ─── */
.new-page *, .new-page *::before, .new-page *::after { box-sizing: border-box; }
.new-page {
  font-family: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--new-bg);
  color: var(--new-heading);
  margin: 0;
  line-height: 1.6;
}

/* ─── 네비 ─── */
.new-nav {
  position: sticky;
  top: 0;
  background: rgba(250,240,230,0.92); /* 린넨 반투명 */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--new-border);
  z-index: 50;
}
.new-nav-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.new-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
}
.new-logo-mark { font-size: 22px; color: var(--new-primary); }
.new-logo-img { display: block; width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; }
.new-logo-text {
  font-weight: 700;
  font-size: 17px;
  background: var(--new-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.new-nav-links {
  list-style: none;
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
  flex: 1;
  justify-content: center;
}
.new-nav-links a {
  color: var(--new-body);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  transition: color .18s;
}
.new-nav-links a:hover { color: var(--new-primary); }
.new-nav-actions { display: flex; gap: 12px; align-items: center; flex-shrink: 0; }

/* ─── 버튼 ─── */
.new-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--new-gradient);
  color: #FFFFFF !important;
  padding: 12px 28px;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(62,44,28,0.15);
  transition: transform .2s, box-shadow .2s;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.new-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(62,44,28,0.22);
}
.new-btn-lg { padding: 16px 36px; font-size: 17px; }
.new-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 9999px;
  border: 1px solid var(--new-border);
  background: #FFFCF7; /* 웜화이트 */
  color: var(--new-heading);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: border-color .18s, box-shadow .18s;
  font-family: inherit;
}
.new-btn-secondary:hover {
  border-color: var(--new-primary);
  box-shadow: 0 2px 8px rgba(62,44,28,0.12);
}
.new-btn-text {
  color: var(--new-body);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  transition: color .18s;
}
.new-btn-text:hover { color: var(--new-heading); }

/* ─── 히어로 ─── */
.new-hero {
  background: var(--new-gradient);
  color: #FFFFFF;
  padding: 100px 24px 120px;
  text-align: center;
  overflow: hidden;
  position: relative;
}
.new-hero-wrap { max-width: 880px; margin: 0 auto; position: relative; z-index: 1; }
.new-hero-badge {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 9999px;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 24px;
  letter-spacing: 0.01em;
}
.new-hero h1 {
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
.new-hero-sub {
  font-size: clamp(15px, 1.4vw, 19px);
  opacity: 0.95;
  margin: 0 0 32px;
  line-height: 1.7;
}
.new-hero-ctas {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}
.new-hero .new-btn-primary {
  background: #FFFFFF;
  color: var(--new-primary) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.new-hero .new-btn-primary:hover {
  background: var(--new-surface);
  box-shadow: 0 12px 28px rgba(0,0,0,0.2);
}
.new-hero .new-btn-text { color: rgba(255,255,255,0.92); }
.new-hero .new-btn-text:hover { color: #FFFFFF; }
.new-hero-trust {
  margin-top: 40px;
  font-size: 14px;
  opacity: 0.85;
}
.new-hero-trust strong { font-weight: 700; }
/* /scenarios 진입 링크 (home.php 히어로 하단) */
.new-hero-scenarios-link { margin: 16px 0 0; }
.new-hero-scenarios-link a {
  color: #FFFFFF;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  border-bottom: 1px solid rgba(255,255,255,0.5);
  padding-bottom: 2px;
  transition: border-color .18s;
}
.new-hero-scenarios-link a:hover { border-bottom-color: #FFFFFF; }
.new-hero-scenarios-link a:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }

/* 히어로 배경 장식 */
.new-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: rgba(255,255,255,0.05);
  border-radius: 50%;
  pointer-events: none;
}
.new-hero::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 400px;
  height: 400px;
  background: rgba(255,255,255,0.04);
  border-radius: 50%;
  pointer-events: none;
}

/* ─── 섹션 공통 ─── */
.new-section-head {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 48px;
}
.new-section-head h2 {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  color: var(--new-heading);
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}
.new-section-head p {
  font-size: 17px;
  color: var(--new-body);
  margin: 0;
}

/* ─── 4 단계 카드 ─── */
.new-features {
  padding: 80px 24px;
  background: var(--new-bg);
}
.new-steps {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.new-step-card {
  flex: 1 1 200px;
  max-width: 240px;
  background: var(--new-surface);
  border: 1px solid var(--new-border);
  border-radius: 20px;
  padding: 28px 20px;
  text-align: center;
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.new-step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.10);
  border-color: var(--new-primary);
}
.new-step-num {
  font-size: 13px;
  color: var(--new-primary);
  font-weight: 700;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.new-step-icon { font-size: 42px; margin-bottom: 16px; line-height: 1; }
.new-step-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--new-heading);
  margin: 0 0 8px;
}
.new-step-card p { font-size: 14px; color: var(--new-body); margin: 0; line-height: 1.6; }
.new-step-arrow {
  color: var(--new-muted);
  font-size: 24px;
  flex-shrink: 0;
  align-self: center;
  display: flex;
  align-items: center;
}

/* ─── 사례 ─── */
.new-showcase {
  padding: 80px 24px;
  background: var(--new-surface);
}
.new-cases {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.new-case-card {
  background: #FFFCF7;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(62,44,28,0.12);
  transition: transform .22s, box-shadow .22s;
}
.new-case-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(62,44,28,0.15);
}
.new-case-thumb {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, rgba(139,115,85,0.14), rgba(210,180,140,0.18));
  border-radius: 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--new-muted);
  font-size: 13px;
}
.new-case-card h4 {
  font-size: 18px;
  font-weight: 700;
  color: var(--new-heading);
  margin: 0 0 8px;
}
.new-case-card p { font-size: 14px; color: var(--new-body); margin: 0; line-height: 1.6; }

/* ─── FAQ ─── */
.new-faq {
  padding: 80px 24px;
  background: var(--new-bg);
}
.new-faq-list { max-width: 800px; margin: 0 auto; }
.new-faq-item {
  background: var(--new-surface);
  border: 1px solid var(--new-border);
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 12px;
  transition: border-color .18s;
}
.new-faq-item:hover { border-color: var(--new-primary); }
.new-faq-item summary {
  font-weight: 700;
  font-size: 16px;
  color: var(--new-heading);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.new-faq-item summary::-webkit-details-marker { display: none; }
.new-faq-item summary::after {
  content: '';  /* .new-faq-icon i 태그로 교체 — 빈 문자열 유지 */
}
.new-faq-item p {
  margin: 12px 0 0;
  color: var(--new-body);
  font-size: 15px;
  line-height: 1.7;
}

/* ─── CTA 섹션 ─── */
.new-cta-section {
  padding: 80px 24px;
  background: var(--new-gradient);
  color: #FFFFFF;
  text-align: center;
}
.new-cta-wrap { max-width: 700px; margin: 0 auto; }
.new-cta-section h2 {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}
.new-cta-section p {
  font-size: 18px;
  opacity: 0.95;
  margin: 0 0 32px;
}
.new-cta-section .new-btn-primary {
  background: #FFFFFF;
  color: var(--new-primary) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.new-cta-section .new-btn-primary:hover {
  background: var(--new-surface);
}

/* ─── 푸터 ─── */
.new-footer {
  background: var(--new-surface);
  border-top: 1px solid var(--new-border);
  padding: 60px 24px 32px;
}
.new-footer-wrap { max-width: 1280px; margin: 0 auto; }
.new-footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px;
  margin-bottom: 32px;
}
.new-footer-col h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--new-heading);
  margin: 0 0 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.new-footer-col ul { list-style: none; margin: 0; padding: 0; }
.new-footer-col li { margin-bottom: 8px; }
.new-footer-col a {
  color: var(--new-body);
  text-decoration: none;
  font-size: 14px;
  transition: color .18s;
}
.new-footer-col a:hover { color: var(--new-primary); }
.new-footer-lang {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--new-border);
  background: #FFFCF7;
  font-family: inherit;
  font-size: 14px;
  color: var(--new-body);
  cursor: pointer;
  transition: border-color .18s;
  width: 100%;
  max-width: 160px;
}
.new-footer-lang:hover { border-color: var(--new-primary); }
.new-footer-bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid var(--new-border);
  font-size: 13px;
  color: var(--new-muted);
  flex-wrap: wrap;
  gap: 12px;
}

/* ─── Stepper ─── */
.new-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 12px 24px;
  background: var(--new-surface);
  border-bottom: 1px solid var(--new-border);
}
.new-stepper-wrap {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
}
.new-step-dot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--new-muted);
  transition: all .2s;
  white-space: nowrap;
}
.new-step-dot span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  border: 2px solid var(--new-border);
  font-size: 11px;
  font-weight: 700;
  transition: all .2s;
}
.new-step-dot.active {
  color: var(--new-primary);
  font-weight: 700;
}
.new-step-dot.active span {
  background: var(--new-gradient);
  border-color: transparent;
  color: #FFFFFF;
}
.new-step-dot.done {
  color: var(--new-body);
}
.new-step-dot.done span {
  background: var(--new-primary);
  border-color: transparent;
  color: #FFFFFF;
}
.new-step-line {
  flex: 1;
  height: 2px;
  background: var(--new-border);
  min-width: 20px;
  max-width: 60px;
}
.new-step-line.done { background: var(--new-primary); }

/* ─── 모바일 ─── */
@media (max-width: 768px) {
  .new-nav-links { display: none; }
  .new-hero { padding: 60px 20px 80px; }
  .new-steps { flex-direction: column; align-items: center; }
  .new-step-arrow { transform: rotate(90deg); }
  .new-step-card { max-width: 100%; width: 100%; }
  .new-nav-actions .new-btn-secondary { display: none; }
  .new-footer-cols { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .new-step-arrow { display: none; }
}

@media (min-width: 769px) and (max-width: 900px) {
  .new-steps { display: grid; grid-template-columns: 1fr 1fr; }
  .new-step-arrow { display: none; }
}

/* ─── 접근성 ─── */
.new-btn-primary:focus-visible,
.new-btn-secondary:focus-visible,
.new-btn-text:focus-visible,
.new-faq-item summary:focus-visible {
  outline: 3px solid var(--new-primary);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .new-step-card,
  .new-case-card,
  .new-btn-primary,
  .new-btn-secondary,
  .new-hero::before,
  .new-hero::after { transition: none !important; animation: none !important; }
}

/* ── 가격 섹션 (인라인 4 티어) ─────────────────────── */
.new-pricing { padding: 80px 24px; background: var(--new-surface); }
.new-pricing-grid {
  max-width: 1280px; margin: 0 auto;
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.new-price-card {
  background: #FFFCF7;
  border: 1px solid var(--new-border);
  border-radius: 20px;
  padding: 32px 24px;
  display: flex; flex-direction: column;
  gap: 14px;
  position: relative;
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.new-price-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(62,44,28,0.15);
  border-color: var(--new-primary);
}
.new-price-featured {
  border: 2px solid transparent;
  background: linear-gradient(#FFFCF7, #FFFCF7) padding-box,
              var(--new-gradient) border-box;
  box-shadow: 0 8px 24px rgba(62,44,28,0.18);
}
.new-price-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--new-gradient); color: #FFFFFF;
  padding: 4px 14px; border-radius: 9999px;
  font-size: 12px; font-weight: 700;
}
.new-price-card h3 {
  font-size: 18px; font-weight: 700; color: var(--new-heading); margin: 0;
}
.new-price-amount strong {
  font-size: 36px; font-weight: 800; color: var(--new-heading);
  letter-spacing: -0.02em;
}
.new-price-amount span {
  font-size: 14px; color: var(--new-muted); margin-left: 4px;
}
.new-price-desc {
  font-size: 13px; color: var(--new-body); margin: 0;
}
.new-price-features {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 14px; color: var(--new-body);
}
.new-price-features li::before {
  content: '✓ '; color: var(--new-primary); font-weight: 700;
}
.new-price-cta {
  margin-top: auto; text-align: center;
  padding: 12px 20px;
}
.new-pricing-foot {
  max-width: 700px; margin: 32px auto 0;
  text-align: center; font-size: 14px; color: var(--new-body);
}
.new-pricing-foot a {
  color: var(--new-primary); text-decoration: none; font-weight: 600;
}
.new-pricing-foot a:hover { text-decoration: underline; }

/* ── 고객군 추천 배너 (?from=<group>) ─────────────────── */
.new-recommend-banner {
  background: linear-gradient(135deg, rgba(125,103,73,.08), rgba(139,115,85,.08));
  border: 1px solid rgba(125,103,73,.25);
  border-radius: 12px;
  padding: 14px 20px;
  margin: 0 auto 24px;
  max-width: 720px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--new-heading);
}

/* Pro 카드가 추천이 아닌 경우 인기 뱃지를 흐리게 표시 */
.new-price-badge-popular {
  background: rgba(var(--new-primary-rgb, 125,103,73), .10);
  color: var(--new-body);
}

/* ── Remixicon 아이콘 시스템 (sjai.co.kr 패턴) ────────── */

/* 1. 카드 좌상단 박스 아이콘 (feature·step·case) */
.new-icon-box {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: rgba(125,103,73, 0.12);
  color: var(--new-primary);
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 26px;
  margin-bottom: 16px;
  transition: background .22s, color .22s, transform .22s;
}
.new-step-card:hover .new-icon-box,
.new-case-card:hover .new-icon-box,
.new-feature-card:hover .new-icon-box {
  background: var(--new-gradient);
  color: white;
  transform: scale(1.05);
}

/* 2. 큰 카테고리 아이콘 (색만) */
.new-icon-large {
  font-size: 40px;
  margin-bottom: 14px;
  color: var(--new-primary);
}

/* 3. FAQ 아이콘 (토글 회전) — summary::after 대신 .new-faq-icon 사용 시 */
.new-faq-icon {
  display: inline-flex;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(125,103,73, 0.12);
  color: var(--new-primary);
  align-items: center; justify-content: center;
  font-size: 16px;
  margin-left: auto;
  transition: all .22s;
  flex-shrink: 0;
}
details.new-faq-item[open] .new-faq-icon {
  background: var(--new-gradient);
  color: white;
  transform: rotate(45deg);
}

/* 4. 인라인 아이콘 (텍스트 옆 버튼) */
.new-btn-primary i,
.new-btn-secondary i {
  font-size: 18px;
  vertical-align: middle;
}

/* 5. 호버 액션 원형 아이콘 */
.new-action-circle {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--new-border);
  color: var(--new-body);
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: all .15s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.new-action-circle:hover {
  background: var(--new-primary);
  color: white;
  transform: scale(1.08);
}

/* 6. 즐겨찾기 별 */
.new-fav-icon { color: var(--new-muted); transition: color .15s; }
.new-fav-icon.active,
.new-fav-icon[aria-pressed="true"] { color: #F59E0B; }

/* 7. 가격 카드 체크 아이콘 (::before 대체) */
.new-price-features.ri-check-list { padding-left: 0; }
.new-price-features.ri-check-list li {
  display: flex; align-items: flex-start; gap: 8px;
}
.new-price-features.ri-check-list li::before { content: none; }
.new-price-features.ri-check-list li i {
  color: var(--new-primary);
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── 라이브 데모 (C1) ───────────────────────────────── */
.new-live-demo {
  padding: 80px 24px;
  background: linear-gradient(180deg, var(--new-bg) 0%, var(--new-surface) 100%);
}

.new-demo-stage {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1.6fr;
  gap: 32px;
  align-items: center;
}

.new-demo-label {
  display: inline-block;
  padding: 4px 12px;
  background: var(--new-gradient);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  border-radius: 9999px;
  margin-bottom: 12px;
  letter-spacing: 0.05em;
}

.new-demo-source { text-align: center; }

.new-demo-source-img {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--new-surface);
  border: 1px solid var(--new-border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.new-demo-source-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.new-demo-arrow {
  text-align: center;
  color: var(--new-primary);
  flex-shrink: 0;
}
.new-demo-arrow i {
  font-size: 48px;
  display: block;
  margin-bottom: 8px;
}
.new-demo-arrow small {
  font-size: 12px;
  font-weight: 600;
  color: var(--new-body);
  white-space: nowrap;
}

.new-demo-results { text-align: center; }

.new-demo-carousel {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 16px;
  overflow: hidden;
  background: var(--new-surface);
  border: 1px solid var(--new-border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.new-demo-card {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s ease;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.new-demo-card.new-demo-card-active { opacity: 1; }

.new-demo-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.new-demo-tag {
  position: relative;
  z-index: 2;
  background: rgba(62,44,28,0.68); /* 어스톤 딥브라운 스크림(이미지 위 라벨) — 검정 scrim 대체, 화이트 텍스트 유지 */
  color: #FFFFFF;
  padding: 8px 16px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.new-demo-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.new-demo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--new-border);
  border: none;
  cursor: pointer;
  transition: all .2s;
  padding: 0;
  flex-shrink: 0;
}
.new-demo-dot:hover { background: var(--new-muted); }
.new-demo-dot.new-demo-dot-active {
  background: var(--new-primary);
  width: 24px;
  border-radius: 4px;
}
.new-demo-dot:focus-visible {
  outline: 3px solid var(--new-primary);
  outline-offset: 3px;
}

.new-demo-caption {
  font-size: 13px;
  color: var(--new-muted);
  margin: 12px 0 0;
}

/* 모바일 — 세로 스택 */
@media (max-width: 900px) {
  .new-demo-stage {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 480px;
  }
  .new-demo-arrow i {
    transform: rotate(90deg);
    font-size: 36px;
  }
  .new-demo-source-img {
    max-width: 320px;
    margin: 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .new-demo-card { transition: none !important; }
  .new-demo-dot  { transition: none !important; }
}

/* ── 첫 사용자 투어 (B3) ────────────────────────────── */
.new-tour-overlay {
  position: fixed; inset: 0;
  background: rgba(62,44,28,0.5); /* 어스톤 딥브라운 딤 — 검정 오버레이 대체 */
  z-index: 9998;
  display: none;
  pointer-events: auto;
}
.new-tour-highlight {
  position: absolute;
  border: 3px solid #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(62,44,28,0.55), 0 0 30px rgba(125,103,73,0.6); /* 어스톤 딥브라운 스포트라이트 딤 */
  pointer-events: none;
  transition: all .3s;
}
.new-tour-tooltip {
  position: absolute;
  width: 320px;
  background: #FFFCF7;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 20px 60px rgba(62,44,28,0.4);
  z-index: 9999;
  font-family: 'Pretendard', sans-serif;
  color: var(--new-heading);
}
.new-tour-progress {
  font-size: 12px; font-weight: 700;
  color: var(--new-primary);
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}
.new-tour-tooltip h4 {
  font-size: 18px; font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.new-tour-tooltip p {
  font-size: 14px;
  color: var(--new-body);
  margin: 0 0 16px;
  line-height: 1.6;
}
.new-tour-actions {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px;
}
.new-tour-actions > div { display: flex; gap: 6px; }
.new-tour-btn-text {
  background: none; border: none; padding: 8px 12px;
  color: var(--new-body); cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 500;
}
.new-tour-btn-text:hover { color: var(--new-primary); }
.new-tour-btn-primary {
  background: var(--new-gradient);
  color: #FFFFFF;
  border: none;
  padding: 8px 16px;
  border-radius: 9999px;
  cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600;
  box-shadow: 0 4px 12px rgba(125,103,73,0.25);
}
.new-nav-help {
  color: var(--new-muted); text-decoration: none;
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s; font-size: 18px;
}
.new-nav-help:hover { background: var(--new-surface); color: var(--new-primary); }

@media (prefers-reduced-motion: reduce) {
  .new-tour-highlight { transition: none !important; }
}

/* ─────────────────────────────────────────
   new-aud-strip — 고객군 컨텍스트 스트립
   templates.php · gallery.php 공통 사용
   ───────────────────────────────────────── */
.new-aud-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  background: linear-gradient(135deg,
      rgba(125,103,73, 0.07) 0%,
      rgba(139,115,85, 0.07) 100%);
  border: 1px solid rgba(139,115,85, 0.15);
  border-radius: 16px;
  padding: 14px 20px;
  margin-bottom: 16px;
}

/* 뱃지: 아이콘 + 라벨 */
.new-aud-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--new-gradient);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 9999px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 3개 미니 항목 (dl) */
.new-aud-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  flex: 1 1 auto;
}
.new-aud-meta-item {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.new-aud-meta-item dt {
  font-size: 11px;
  font-weight: 600;
  color: var(--new-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.new-aud-meta-item dd {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--new-heading);
}

/* 한 줄 차별 */
.new-aud-oneliner {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--new-secondary);
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

/* 페이지 종류별 힌트 */
.new-aud-hint {
  margin: 0;
  font-size: 12px;
  color: var(--new-body);
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
}
.new-aud-hint-label {
  font-weight: 600;
  color: var(--new-primary);
}

/* 모바일: 세로 스택 */
@media (max-width: 640px) {
  .new-aud-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
  }
  .new-aud-meta {
    gap: 6px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .new-aud-strip { transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   Phase A — 고객군 적응형 UI 셸 (audience-adaptive-ui.md §6·§7)
   신규 클래스만. 전역 토큰 변경 없음.
   ════════════════════════════════════════════════════════════════ */

/* ─── 앱 셸 그리드 ─── */
.new-shell {
  display: grid;
  /* 사이드바 240px + 본문 */
  grid-template-columns: 240px 1fr;
  min-height: calc(100vh - 60px); /* nav 높이(약 60px) 빼기 */
  align-items: start;
}
/* personal / 사이드바 없을 때 → 본문 풀폭 */
.new-shell-no-sidebar {
  grid-template-columns: 1fr;
}
.new-shell-main {
  min-width: 0; /* grid 자식이 overflow 안 나오게 */
  padding: 0; /* 각 페이지 자체 패딩 유지 */
}

/* ─── 좌측 사이드바 ─── */
.new-sidebar {
  width: 240px;
  min-height: calc(100vh - 60px);
  background: var(--new-surface, #F9FAFB);
  border-right: 1px solid var(--new-border, #E5E7EB);
  padding: 20px 0 40px;
  overflow-y: auto;
  position: sticky;
  top: 60px; /* nav 높이 */
  align-self: start;
  transition: transform 0.25s ease;
  z-index: 40;
}
.new-sidebar-section {
  padding: 0 12px;
  margin-bottom: 4px;
}
.new-sidebar-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--new-muted, #94A3B8);
  margin: 12px 8px 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.new-sidebar-title i { font-size: 13px; }
.new-sidebar-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.new-sidebar-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--new-primary, #7D6749);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  flex-shrink: 0;
  margin-right: 8px;
  margin-top: 8px;
}
.new-sidebar-add-btn:hover { opacity: 0.85; }
.new-sidebar-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--new-body, #475569);
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.new-sidebar-link i { font-size: 16px; flex-shrink: 0; }
.new-sidebar-link:hover {
  background: rgba(125,103,73,0.08);
  color: var(--new-primary, #7D6749);
}
.new-sidebar-link-active {
  background: rgba(125,103,73,0.12);
  color: var(--new-primary, #7D6749);
  font-weight: 600;
}
.new-sidebar-link-strong { font-weight: 700; color: var(--new-secondary, #8B7355); }
.new-sidebar-link-strong:hover { color: var(--new-secondary, #8B7355); background: rgba(139,115,85,0.08); }
/* 라우트 없는 "준비 중" 메뉴 — 클릭 불가(span), 회색 톤, 뱃지로 로드맵 예고 */
.new-sidebar-link-disabled {
  color: var(--new-muted, #94A3B8);
  cursor: default;
}
.new-sidebar-link-disabled:hover {
  background: none;
  color: var(--new-muted, #94A3B8);
}
.new-sidebar-link-disabled i { opacity: 0.6; }
.new-sidebar-soon {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
  color: var(--new-body, #475569);
  background: var(--new-surface, #F9FAFB);
  border: 1px solid var(--new-border, #E5E7EB);
}
.new-sidebar-divider {
  border: none;
  border-top: 1px solid var(--new-border, #E5E7EB);
  margin: 10px 12px;
}
/* 콘텐츠 생산 파이프라인 5단계 미니 가이드 (sidebar 내) */
.new-sidebar-pipeline {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 6px 0 2px 4px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--new-primary, #7D6749) 7%, transparent);
  border-left: 2px solid var(--new-border, #C4B5A0);
  border-radius: 0 8px 8px 0;
}
.new-sidebar-pipeline-step {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--new-body, #6B5844);
  padding: 2px 0;
  line-height: 1.3;
}
.new-sidebar-pipeline-step i {
  font-size: 13px;
  color: var(--new-muted, #735F4A);
  flex-shrink: 0;
}
/* 에이전시 클라이언트 색 점 */
.new-sidebar-dot-blue  { color: #3B82F6 !important; font-size: 10px !important; }
.new-sidebar-dot-green { color: #22C55E !important; font-size: 10px !important; }
.new-sidebar-dot-yellow{ color: #EAB308 !important; font-size: 10px !important; }
/* 모바일 드로어 닫기 버튼 — 데스크탑 숨김 */
/* 모바일 전용 사이드바 드로어 열기 버튼 — 데스크톱은 사이드바가 상시 표시되므로 숨김 */
.new-nav-menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--new-muted);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 22px;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.new-nav-menu-btn:hover { background: var(--new-surface); color: var(--new-primary); }
@media (max-width: 768px) {
  .new-nav-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

.new-sidebar-close {
  display: none;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--new-body);
  padding: 8px 16px;
}
.new-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(62,44,28,0.3); /* 어스톤 딥브라운 딤 — 검정 backdrop 대체 */
  z-index: 39;
}
.new-sidebar-backdrop.new-sidebar-backdrop-open {
  display: block;
}

/* ─── 상단 nav 고객군 뱃지 ─── */
.new-nav-audience-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 9999px;
  background: rgba(125,103,73,0.1);
  border: 1px solid rgba(125,103,73,0.3);
  color: var(--new-primary, #7D6749);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.18s;
  white-space: nowrap;
}
.new-nav-audience-badge i { font-size: 15px; }
.new-nav-audience-badge:hover {
  background: rgba(125,103,73,0.18);
  color: var(--new-primary, #7D6749);
}

/* ─── 모바일 사이드바 드로어 ─── */
@media (max-width: 768px) {
  .new-shell {
    grid-template-columns: 1fr; /* 사이드바 드로어 전환 */
  }
  .new-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    transform: translateX(-100%);
    z-index: 45;
    padding-top: 56px; /* 상단 여백 */
  }
  .new-sidebar.new-sidebar-open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,0.12);
  }
  .new-sidebar-close { display: block; }
  /* 백드롭 표시는 JS 가 .new-sidebar-backdrop-open 클래스 토글로 제어 */
  body.new-sidebar-body-lock { overflow: hidden; }
  /* 모바일 사이드바 토글 버튼 — 각 페이지가 추가 가능 */
  .new-nav-audience-badge span { display: none; } /* 모바일엔 아이콘만 */
}

/* ─────────────────────────────────────────
   .new-aud-switch — 고객군 전환 드롭다운
   nav.php 로그인 우측에 상시 노출.
   ───────────────────────────────────────── */
.new-aud-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* 트리거 버튼 */
.new-aud-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 9999px;
  background: rgba(125,103,73, 0.1);
  border: 1px solid rgba(125,103,73, 0.3);
  color: var(--new-primary, #7D6749);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s;
  font-family: inherit;
}
.new-aud-switch-btn:hover,
.new-aud-switch-btn[aria-expanded="true"] {
  background: rgba(125,103,73, 0.18);
}
.new-aud-switch-btn i { font-size: 15px; }
.new-aud-switch-btn .new-aud-switch-caret {
  font-size: 12px;
  transition: transform 0.18s;
}
.new-aud-switch-btn[aria-expanded="true"] .new-aud-switch-caret {
  transform: rotate(180deg);
}

/* 드롭다운 메뉴 */
.new-aud-switch-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  background: #FFFCF7;
  border: 1px solid var(--new-border, #E5E7EB);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  z-index: 200;
  padding: 6px;
  list-style: none;
  margin: 0;
}
.new-aud-switch-menu.is-open {
  display: block;
}

/* 메뉴 항목 */
.new-aud-switch-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--new-heading, #0F172A);
  cursor: pointer;
  text-align: left;
  transition: background 0.14s;
}
.new-aud-switch-item:hover {
  background: var(--new-surface, #F9FAFB);
}
.new-aud-switch-item i { font-size: 15px; color: var(--new-muted, #94A3B8); }
.new-aud-switch-item[aria-current="true"] {
  background: rgba(125,103,73, 0.08);
  color: var(--new-primary, #7D6749);
  font-weight: 700;
}
.new-aud-switch-item[aria-current="true"] i { color: var(--new-primary, #7D6749); }

/* 현재 선택 체크마크 */
.new-aud-switch-check {
  margin-left: auto;
  font-size: 14px;
  color: var(--new-primary, #7D6749);
}

/* 모바일: 드롭다운 메뉴 우측 정렬 (라벨 숨김은 위 전역 규칙으로 승격) */
/* 모바일: nav 전환 버튼 라벨 숨기고 아이콘+캐럿만 (데스크톱은 라벨 노출) */
@media (max-width: 768px) {
  .new-aud-switch-label { display: none; }
  .new-aud-switch-menu { right: 0; }
}

/* ─── 사이트 공통 스타일 유틸리티 (재사용) ───
 * 어느 페이지에서든 class 부여만으로 룩 적용. .new-* 격리 밖 전역 유틸.
 */

/* 인포그래픽 스타일 — 정보/데이터 카드 유틸. class="style-infographic"
 * 카테고리: 일러스트/아트 · 태그: 인포그래픽·데이터·차트·시각화
 * 대표 색상(메타): #111827 #2563EB #F9FAFB
 * 룩: 줄무늬 노트 배경 + 인디고 좌측 보더 8px
 */
.style-infographic {
  background: #F8FAFC;
  color: #1E293B;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #E2E8F0;
  border-left: 8px solid #6366F1;
  background-image: linear-gradient(0deg, transparent 95%, #EEF2FF 95%);
  background-size: 100% 20px;
}